VUE+ELEMENT-UI项目前端弹窗el-dialog生成二

原理
预览按钮请求：showModal
弹窗弹出后通过@opened="qrCodeCreate"进行二维码生成：qrCodeCreate

npm install qrcodejs2 -S

引入

import QRCode from 'qrcodejs2'

定义

    components: {
      QRCode
    },

  <el-button type="text" size="small" @click="showModal(scope.row.id)">预览</el-button>

    <el-dialog
      title="扫描下方二维码进行预览"
      :visible.sync="qrCodeDialogVisible"
      width="20%"
      @opened="qrCodeCreate"
      :before-close="qrCodeHandleClose">
      <div style="margin-left: 30%">
        <div id="qrCode" ref="qrCode"></div>
      </div>
      <span slot="footer" class="dialog-footer">
      </span>
    </el-dialog>

    data () {
      return {
        qrCodeDialogVisible: false,
        qrCodesId: '',
      }
    }

  // 预览
      showModal(id){
        console.log(777)
        console.log(id)
        this.qrCodeDialogVisible = true;
        this.qrCodesId = id;
      },
      //创建二维码
      qrCodeCreate() {
        console.log(666)
        console.log(this.qrCodesId)
        var qrcode = new QRCode(this.$refs.qrCode, {
          // text: 'xxxx', // 需要转换为二维码的内容
          text: 'http://www.meishudaguan.com/sdetails/' + this.qrCodesId, // 需要转换为二维码的内容
          width: 100,
          height: 100,
          colorDark: '#000000',
          colorLight: '#ffffff',
          correctLevel: QRCode.CorrectLevel.H
        })
      },
      qrCodeHandleClose() {
        this.qrCodeDialogVisible = false;
        this.qrCode = '';
        document.getElementById('qrCode').innerHTML = '';
      },

推荐参考：https://www.jianshu.com/p/155063b322f5
也可以参考：https://www.freesion.com/article/6473972151/