qrcodejs2

1.安装qrcodejs2

2.在使用页面中引入

import QRCode from "qrcodejs2";

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

  components: {QRCode,},

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

    showCode(row) {this.dialogVisible = true;this.$nextTick(() => {  需要nextTick否则获取不到divlet 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-dialogtitle="渠道二维码":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>

 页面效果图：