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

最新推荐文章于 2024-12-06 15:02:01 发布

连风都不记得我

最新推荐文章于 2024-12-06 15:02:01 发布

阅读量2.3k

点赞数

文章标签： javascript vue js

本文链接：https://blog.csdn.net/weixin_45419441/article/details/107897816

版权

首先安装 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);
    },