vue二维码学习

1、先引进qrcode.js

import QRCode from 'qrcodejs2'

2、设置展示二维码的标签

<div class="qrcode" id="qrcode"></div>

3、生成二维码的关键js

// 生成二维码
GetQRcode(){
    new QRCode('qrcode', {
        text: ,    //  需要生成二维码的内容
        width: 256,
        height: 256,
        colorDark : '#000000',
        colorLight : '#ffffff',
        correctLevel : QRCode.CorrectLevel.H   //容错率，L/M/H
    });
},

4、下载生成的二维码

// 下载二维码
downLoad(){
    var canvas = document.getElementById('qrcode').getElementsByTagName('canvas');
    this.downLoadImage(canvas);
},
downLoadImage(canvas){
    var a = document.createElement("a");
    a.href = canvas[0].toDataURL('image/png');
    a.download = this.form.oppor_name;
    a.click();
    a = null;
},

5、特别注意

• 动态生成多个二维码时，关掉某一个二维码时要清空展示二维码标签，否则canvas画布渲染会导致出现重复二维码

• 如下：
  

• 处理方法

//关闭
closeT(){
    // console.log('close');
    var codeHtml = document.getElementById('qrcode');
    codeHtml.innerHTML = "";
    this.$emit('closed')
},

• 处理完成后，正确显示