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就不会。