vue生成动二维码（qrcodejs2）

持续更新

1.在项目中安装二维码的插件

在终端中执行 npm i qrcodejs2

2.在引用中script标签中引用

在页面中引用 import QRCode from "qrcodejs2"

3.在页面中展示二维码，view部分

 <el-dialog title="二维码展示" :visible.sync="qrCodeShow"  width="300px" :before-close="qrCodeDel" >
      <span slot="footer" class="dialog-footer">
        <div id="qrCode" ref="qrCodeDiv"></div>  
        <el-button type="primary" @click="qrCode({arcode:'这是二维码'})">生成二维码</el-button>
      </span>
  </el-dialog>

qrCode为二维码显示方法，qrCodeDel方法为清除上次二维码数据，详情如下

4.二维码展示方法

qrCode(e){
            new QRCode(this.$refs.qrCodeDiv, {            
                    text: e.barcode, //text必须是字符串
                    width: 180,            
                    height: 180,            
                    colorDark: "#333333", //二维码颜色            
                    colorLight: "#ffffff", //二维码背景色            
                    correctLevel: QRCode.CorrectLevel.L//容错率，L/M/H          
                }) 
          this.qrCodeShow = true          
      }

5.清除上次二维码数据

qrCodeDel(){
     //方法一
        $('#qrCode').html("")
     //方法二
        this.$refs.qrCodeDiv.innerHTML = ''; 

        this.qrCodeShow = false //关闭弹窗
    //注：ID要对应，当前实例为 qrCode
      },