vue项目生成二维码

下载依赖

npm i qrcodejs2 -S

页面引用

import QRCode2 from 'qrcodejs2'

使用例子

// html
...
 <div id="qrcodeDiv"></div>
...
 
// js
...
data(){
  QRText:'www.baidu.com'
},
...
mounted(){
  this.getQRcode()
} ,
methods:{
  getQRcode(){
    let qrcodeDiv = document.getElementById("qrcodeDiv");
    document.getElementById("qrcodeDiv").innerHTML = ""; // 解决多次点击生成多张二维码问题
    const qrcode = new QRCode(qrcodeDiv, {
        text: QRText, // 用于生成二维码的文本
        width: 120, // 高度
        height: 120, // 宽度
        colorDark: "#000000", //前景色
        colorLight: "#ffffff", //后景色
        correctLevel: QRCode.CorrectLevel.H, //容错级别 QRCode.CorrectLevel.L QRCode.CorrectLevel.M QRCode.CorrectLevel.Q QRCode.CorrectLevel.H
          });
  }
}

bug修复

生成多张二维码问题

document.getElementById("qrcodeDiv").innerHTML = ""; // 在每一次生成二维码的时间把dom元素置空。