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

news2024/10/6 10:32:14

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.页面结构如下

 <el-dialog
      title="渠道二维码"
      :modal-append-to-body="false"
      :visible.sync="dialogVisible"
      :before-close="qrCodeHandleClose"
      width="20%"
      custom-class="dialog-code"
      center
      :show-close="false"
    >
      <div id="qrCode" ref="qrCode"></div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="qrCodeHandleClose">关闭</el-button>
      </span>
    </el-dialog>