526互联

vue用qrcodejs2生成二维码，解决多个二维码追加的问题

发布时间 2023-05-22 13:44:24作者: 万笑佛

vue使用qrcodejs2生成二维码

1、安装qrcodejs2

npm install qrcodejs2

 2、代码

//这个div用来展现二维码
<div   id="twoImageId"></div>


//生成二维码的方法
generateQRCode(classId, value) {
	new QRCode(document.querySelector(classId), {
		text: value,
		width: 180,
		height: 180,
		colorDark: "#000000",
		colorLight: "#ffffff",
		correctLevel: QRCode.CorrectLevel.H
	})
},		


this.generateQRCode("#twoImageId",'这是需要生成二维码的文本');

这样就能生成二维码，但是窗口关闭在打开，重新生成的二维码，会追加到之前生成的二维码并没有覆盖如下图：

3、解决问题

网上搜了一些解决办法如下两个都不行，一旦这样清空，后面生成二维码的代码就无法正常生成二维码了

$('#twoImageId').html("");
$('#twoImageId').empty()

最终解决办法：

<div ref="twoImageRef" id="twoImageId"></div>

//清空之前的二维码 否则会生成多个
this.$refs.twoImageRef.innerHTML = '';

this.generateQRCode("#twoImageId",'这里是需要生成二维码的文本');