Vue 3使用qrcode

在Vue 3中使用qrcode需要先安装qrcode库，可以通过npm或yarn进行安装：

npm install qrcode --save

或

yarn add qrcode

安装完成后，在Vue组件中引入qrcode库：

import QRCode from 'qrcode'

export default {
  name: 'MyComponent',
  data() {
    return {
      qrCodeUrl: ''
    }
  },
  mounted() {
    this.generateQRCode('https://www.example.com')
  },
  methods: {
    generateQRCode(text) {
      QRCode.toDataURL(text)
        .then(url => {
          this.qrCodeUrl = url
        })
        .catch(err => {
          console.error(err)
        })
    }
  }
}

在模板中使用生成的QRCode图片：

<template>
  <div>
    <img :src="qrCodeUrl" alt="QR Code">
  </div>
</template>

以上代码将生成一个可用于扫描的QR Code图片。请注意，由于生成QR Code图片可能需要一些时间，因此最好在组件的mounted钩子中进行操作，以确保组件已完全加载。