Vue-9-二维码

一、概述

有了AI的帮助，学习起来更加轻松，这次学习下二维码的制作。 二维码基于qrcode.vue实现，文档简单易懂，本次就练习下vue的写法，但是这些都用cursor帮我写了，所以我是来做观众的。qrcode.vue的官方地址：github.com/scopewu/qrc…

二、实现

自己将qrcode简单做成一个组件，多了一个输入框，如下：

<template>
  <div class="qrcode-container">
    <h1>QR Code Generator</h1>
    <input v-model="qrText" placeholder="Enter text or URL for QR code" />
    <qrcode-vue :value="qrText" :size="size" level="H" />
    <p>Current QR Code content: {{ qrText }}</p>
  </div>
</template>

<script>
import QrcodeVue from 'qrcode.vue'

export default {
  name: 'MyQRCodeGenerator', // 更改了组件名
  components: {
    QrcodeVue
  },
  data() {
    return {
      qrText: 'https://baidu.com',
      size: 300
    }
  }
}
</script>

<style scoped>
.qrcode-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

input {
  width: 300px;
  padding: 10px;
  font-size: 16px;
}
</style>

使用index.vue引用这个组件：

<template>
  <div class="qrcode-page">
    <MyQRCodeGenerator />
  </div>
</template>

<script>
import MyQRCodeGenerator from './myqrcode.vue' // 更新了导入路径

export default {
  name: 'QRCodePage',
  components: {
    MyQRCodeGenerator // 更新了组件名
  }
}
</script>

<style scoped>
.qrcode-page {
  padding: 20px;
}
</style>

三、总结

还是多练习组件的写法，多练习Vue的使用。再夸一夸AI，真能提升学习效率。
现在Vue3是主流，很多组件在进行npm安装的时候，默认是支持Vue3的，因此要注意选择对应Vue的版本。
因为我是使用Vue2，因此在安装qrcode.vue的时候，需要指定版本，如下：

npm install qrcode.vue@1.7.0