前端打开弹窗时将链接转化为二维码

qrcodejs2

1.安装qrcodejs2

2.在使用页面中引入

import QRCode from "qrcodejs2";

 3.在组件中注册(Vue2项目)

  components: {
    QRCode,
  },

4.在data中定义qrcode，以及方法中使用

    showCode(row) {
      this.dialogVisible = true;
      this.$nextTick(() => {  需要nextTick否则获取不到div
        let qrcode = new QRCode(this.$refs.qrCode, {
          // text: 'xxxx', // 需要转换为二维码的内容
          text: row.url, // 需要转换为二维码的内容(后端返回的链接)
          width: 100,
          height: 100,
          colorDark: "#000000",
          colorLight: "#ffffff",
          correctLevel: QRCode.CorrectLevel.H,
        });
      });
    },
    qrCodeHandleClose() { 弹窗关闭清空，否则会出现多个
      document.getElementById("qrCode").innerHTML = "";
      this.dialogVisible = false;
    },

5.页面结构如下

 
      

      
        关闭
      
    

 页面效果图：