Vue使用QRCode插件,生成二维码及错误提示Cannot read property 'appendChild' of null"
1.安装文件npm install --save qrcode22.引入文件import QRCode from 'qrcode2';3.引入文件<template><div class="qrcodeimg"><div class="item" ref="qrCode" xss=removed></div>...
·
1.安装文件
npm install --save qrcode2
2.引入文件
import QRCode from 'qrcode2';
3.引入文件
<template>
<div class="qrcodeimg">
<div class="item" id="qrcode" ref="qrCode" xss=removed></div>
</div>
</template>
crateQrcode(id) {
this.imgVisible = true;
this.$nextTick(() => {
let qr = new QRCode(this.$refs.qrCode, {
width: 300,
height: 300, // 高度
text: id // 二维码内容
// render: 'canvas' // 设置渲染方式(有两种方式 table和canvas,默认是canvas)
// background: '#f0f',
// foreground: '#ff0'
})
console.log(qr)
});
},
}
4.清空二维码
document.getElementById("qrcode").innerHTML = "";
5.特别提醒
注意:一定要在div生成之后再生成二维码,否则就会出现Cannot read property ‘appendChild’ of null"的错误
this.$nextTick
参考链接1:https://blog.csdn.net/abcdef12030/article/details/100667911
参考链接2:https://blog.csdn.net/xy19950125/article/details/89494369
更多推荐
已为社区贡献18条内容
所有评论(0)