vue2、vue3生成二维码

 Vue2版：

工具：使用 qrcodejs插件来生成二维码

安装：npm install qrcodejs2

qrcodejs官网地址：

https://davidshimjs.github.io/qrcodejs/https://davidshimjs.github.io/qrcodejs/

代码示例：

<template><div class="qrcodeBox"><div ref="qrcode" class="qrcode"></div><button @click="generateQRCode">Generate QR Code</button></div>
</template><script>
import QRCode from "qrcodejs2";export default {data() {return {text: "这是成的二维码内容", // 二维码内容};},mounted() {this.generateQRCode(); // 组件挂载后生成二维码},methods: {// 更新二维码generateQRCode() {// 清空二维码容器const container = this.$refs.qrcode;container.innerHTML = "";// 使用qrcodejs生成二维码new QRCode(container, {text: this.text,width: 128,height: 128,colorDark: "#000000",colorLight: "#ffffff",correctLevel: QRCode.CorrectLevel.L,});},},
};
</script><style>
.qrcodeBox {text-align: center;padding: 20px;
}
.qrcode {margin-bottom: 20px;
}
</style>

Vue3版：

把安装命令换为：

npm install qrcodejs2-fix

安装后使用方式没变

tip：在vue3中使用npm install qrcodejs2安装使用会报错（报错信息自己可以找找原因），使用 npm install qrcodejs2-fix就不会。