vue项目中使用qrcodesjs2生成二维码简单示例
作者：无知的小菜鸡
最近项目中需生成二维码,发现了很好用的插件qrcodesjs2,所以下面这篇文章主要给大家介绍了关于vue项目中使用qrcodesjs2生成二维码的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
最近写项目遇到一个需求需要生成二维码，看了一下项目中生成二维码使用的都是qrcodesjs2，而且操作比较简单。在这里简单记录一下
vue项目中使用qrcodesjs2生成二维码
安装
npm i qrcodejs2 -S
html
<!-- 放置二维码的容器,需要给一个ref --> <div v-for="(item,i) in qrcode" :key="i"> <div id="qrcode" :ref="qrcode[i]"></div> <div>
项目中需要打印多个二维码，而且这样更加通用无论打印单个还是多个都可以
js
// 生成二维码
printTwoCode(width) {
for (let j in this.qrcode) {
let code = this.qrcode[j]; // 二维码内容
new QRCode(this.$refs[`${this.qrcode[j]}`][0], {
text: code,
render: 'canvas',
width: width,
height: width,
colorDark: '#000000',
colorLight: '#ffffff'
});
}
},清除
for (let j in this.qrcode) {
this.$refs.qrcode[j][0].innerHTML = ''
}使用
this.$nextTick(() => {
this.printTwoCode(130);
});附：使用qrcodejs2生成多个二维码
首先安装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);
// }
});
});
},
},总结
到此这篇关于vue项目中使用qrcodesjs2生成二维码的文章就介绍到这了,更多相关vue用qrcodesjs2生成二维码内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！