首先第一步当然是安装了:
npm install qrcodejs2 --save,(有淘宝镜像的可以用cnpm进行安装);
第二步:引入,哪个页面用到,在哪个页面引入
import QRCode from 'qrcodejs2';
然后直接用就可以了,
<template>
<div id="qrcode"></div>
</template>
然后在method写入方法,一定要记住上面的id名和下面的参数名保持一致,就是我加粗的部分了
qrcode() {
const qrcode = new QRCode('qrcode', {
text: this.codeValue,
colorDark: '#000',
colorLight: '#fff',
});
}
最关键的一点,一定要在nextTick里面调用
this.$nextTick(() => {
this.qrcode();
});
如果你还是报错,报错还是这样的Error in nextTick: "TypeError: Cannot read property 'appendChild' of null"
那你就看看 this.qrcode();是在什么时候调用的,调用的时候dom 节点生成了吗??
解决办法,就是生成dom 节点之后在调用
举个例子:
这个是在打开dialog框之后再调用这个方法的,用watch监听一下,保证是在打开dialog框之后调用
watch: {
dialogVisible(val) {
if (val) {
this.$nextTick(() => {
this.qrcode();
});
}
}
},
小伙伴们你们学会了吗?有问题请留言哦