vue3 使用QrCode生成二维码

要在Vue3中生成二维码，可以使用第三方库qrcodejs2，该库提供了生成二维码的功能。

首先，在终端中运行以下命令安装qrcodejs2：

“`

npm install qrcodejs2

“`

接下来，在Vue组件中引入qrcodejs2并使用它生成二维码。

在组件的script标签中，引入qrcodejs2库：

“`javascript

import QRCode from ‘qrcodejs2’;

“`

然后，在组件的mounted钩子中，实例化一个QRCode对象并传入容器元素和需要转换为二维码的数据：

“`javascript

mounted() {

const qrcode = new QRCode(this.$refs.qrcode, {

text: ‘https://example.com’, // 数据，可以是链接、字符串等

width: 128, // 宽度

height: 128, // 高度

});

}

“`

在组件的template标签中，添加一个标记用于容纳生成的二维码：

“`html

“`

以上代码将在页面中生成一个大小为128×128像素的二维码，并且内容为”https://example.com”。

如果需要在组件中生成可变的二维码，可以使用Vue的响应式数据，并在数据更新后重新生成二维码：

“`javascript

data() {

return {

qrcodeText: ‘https://example.com’,

};

},

mounted() {

this.generateQRCode();

},

methods: {

generateQRCode() {

const qrcode = new QRCode(this.$refs.qrcode, {

text: this.qrcodeText,

width: 128,

height: 128,

});

},

},

“`

在模板中绑定数据和调用方法即可：

“`html

“`

这样，每当输入框的值改变时，二维码会立即更新。

这是一个简单的示例，你可以根据具体需求进行定制和扩展。