vue中使用qrcode动态生成二维码,并解决点击按钮多次生成二维码的问题
网上有很多教程,用npm安装,但我没有成功,所以我用的是引入js文件
将qrcode.js引入你的页面中
我把js文件和页面放在一个文件夹里的,因为qrcode 没有用es模式 所以只能引入到window下面,改了下qrcode.js内容,将var QRCode
改成了window.QRCode;
然后在downLoad.vue里引入jsimport "./qrcode";
需要注意的是,可能因为vue配置的不同,引入方式不一样;
在methods里添加函数
showQRCodeDialog(type) {
let qrcodeEL = document.getElementById("qrcode");
let qrcode = new QRCode(qrcodeEL);
document.getElementById("qrcode").innerHTML = "";
this.showQRCode = true;
this.getCode(type)
},
getCode(type) {
let text="";
// 设置参数方式
if(type === 1){
text = "http://www.baidu.com";
}else{
text = "https://www.csdn.net/"
}
var qrcode = new QRCode("qrcode", {
text: text,
width: 256,
height: 256,
colorDark: "#000000",
colorLight: "#ffffff",
correctLevel: QRCode.CorrectLevel.H
});
}
一定要加上document.getElementById("qrcode").innerHTML = "";
,否则每点击一次按钮就会多一个二维码