vue 一个动态链接url转成二维码

安装相关的依赖包

npm install qrcode2 --save

template中需要展示的容器

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

不要不忘了引入这个组件

 components: { QRCode },

在js代码中写入转换为二维码方法

 //生成二维码
    qrcodeScan() {
      //这里是为了 每次进入方法就删除上一张二维码
      document.getElementById("qrcode").innerHTML = "";
      //获取url
      let data = {
        itemId: this.id
      }
      reqGetItemShortUrl(data).then((res) => {
        this.codeUrl = res.data.data
        // 生成二维码
        new QRCode(document.getElementById("qrcode"), {
          text: res.data.data, // 这里为动态二维码地址
          width: 164,  // 二维码宽度 
          height: 164, // 二维码高度 
          correctLevel: QRCode.CorrectLevel.H  // 二维码容错级别 H M L
        })
      });
    },

调用二维码方法，就实现效果了

mounted() {
    this.qrcodeScan()
  },