效果
![](https://img-blog.csdnimg.cn/c6a2589c34c8498aaf59374e2dc1e3c8.png)
首先安装qrcodejs2
然后引用 import QRCode from 'qrcodejs2'
<div class="box">
<div v-for="(item, index) in list" class="boxscod" :key="index">
<div :id="`code${item.id}`" :ref="`code${item.id}`" class="qrcode">
</div>
<div class="abc">
<span class="cargo-wrap">{{ item.id }}</span>
<span class="cargo-cardNo">{{ item.idCard }}</span>
</div>
</div>
</div>
return {
list: [
{ id: '01', idCard: 15336 },
{ id: '02', idCard: 18528 },
{ id: '03', idCard: 78542 },
{ id: '04', idCard: 46824 },
],
};
mounted() {
this.showCode();
},
methods: {
creatQrCode(id, code) {
console.log(code);
console.log(typeof code);
var qrcode = new QRCode(id, {
text: encodeURI(code), // 需要转换为二维码的内容
width: 70,
height: 70,
colorDark: "#000000",
colorLight: "#ffffff",
// correctLevel: QRCode.CorrectLevel.H,
});
console.log(qrcode);
},
// 展示二维码
showCode() {
// this.closeCode()
this.$nextTick(() => {
this.list.forEach((item) => {
// if (item.type === 1 || item.type === 2) {
this.creatQrCode("code" + item.id, item.idCard);
// }
});
});
},
},