二维码在element UI的用法

第一步：npm install qrcodejs2 --save

第二步：在vue组件里引入

父组件

    <el-dialog title="二维码打印" :visible.sync="isQrCodeShow">
      <qrCode :id = "curRiskPointId" :name="curRiskPointName" :randowNum= "randowNum"/>
    </el-dialog>

子组件

import QRCode  from "qrcodejs2" //这里需要引入组件
<span id="qrCode" ref="qrCode"></span><!--view层-->
watch:{
    randowNum(){
        this.qrCode();
  }
},
mounted(){
    this.qrCode()
},
methods:{
  qrCode() {
          document.getElementById("qrCode").innerHTML = "";
          let qrCode = new QRCode(this.$refs.qrCode, {
            width: 124,
            height: 124, // 高度
            text: this.name, // 数字转化为字符串
        //correctLevel: QRCode.CorrectLevel.H
      });  
    }
}
components: { QRCode }

二维码弹框部分是一个子组件，子组件在加载的时候，由于缓存的原因，在父组件触发弹框的时候，传入子组件一个随机数，然后在组件里边监听了随机数（randowNum），当randowNum变化的时候，触发生成新的二维码，这种一般处理页面需要多个二维码生成的时候保证每一个二维码都是新的。 在生成二维码的时候，需要把生成二维码的dom元素清空，否则会出现多个二维码排列的情况。