vue 获取url动态地址生成二维码

首先 安装 npm install qrcode2 --save

在当页面引入 mport QRCode from "qrcode2";

在组件中定义 components: {

    QRCode,

  },

 <div id="qrcode" ref="qrcode"></div>

<el-input @blur="showQrcode" v-model="configForm.qrcodeUrl" style=" width:200px"></el-input>

通过input输入框 动态生成url地址 在失去焦点的时候 调用 showQrcode方法

在showQrcode方法中调用 生成二维码的方法

在qrcodeScan 方法中    每次进入方法就删除上一张二维码 这样子动态改变

  showQrcode() {
      this.qrcodeScan();
    },
    qrcodeScan() {
//这里是为了 每次进入方法就删除上一张二维码
    document.getElementById("qrcode").innerHTML = "";
      // 生成二维码
      
      var qrcode = new QRCode(document.getElementById("qrcode"), {
        text: this.configForm.qrcodeUrl, // 这里为动态二维码地址
        width: 100,
        height: 100,
        colorDark: "#000000",
        colorLight: "#ffffff",
        correctLevel: QRCode.CorrectLevel.H,
      });
      console.log(this.configForm.qrcodeUrl);
    },