vue中使用qrcode动态生成二维码,并解决点击按钮多次生成二维码的问题

vue中使用qrcode动态生成二维码,并解决点击按钮多次生成二维码的问题

    • 将qrcode.js引入你的页面中
    • 在methods里添加函数

网上有很多教程,用npm安装,但我没有成功,所以我用的是引入js文件

将qrcode.js引入你的页面中

vue中使用qrcode动态生成二维码,并解决点击按钮多次生成二维码的问题_第1张图片

我把js文件和页面放在一个文件夹里的,因为qrcode 没有用es模式 所以只能引入到window下面,改了下qrcode.js内容,将var QRCode改成了window.QRCode;然后在downLoad.vue里引入jsimport "./qrcode";
需要注意的是,可能因为vue配置的不同,引入方式不一样

在methods里添加函数

showQRCodeDialog(type) {
      let qrcodeEL = document.getElementById("qrcode");
      let qrcode = new QRCode(qrcodeEL);  
        document.getElementById("qrcode").innerHTML = "";
        this.showQRCode = true;
        this.getCode(type)
    },
    getCode(type) {
      let text="";
      // 设置参数方式
      if(type === 1){
        text = "http://www.baidu.com";
      }else{
        text = "https://www.csdn.net/"
      }
      var qrcode = new QRCode("qrcode", {
        text: text,
        width: 256,
        height: 256,
        colorDark: "#000000",
        colorLight: "#ffffff",
        correctLevel: QRCode.CorrectLevel.H
      });
    }

vue中使用qrcode动态生成二维码,并解决点击按钮多次生成二维码的问题_第2张图片
一定要加上document.getElementById("qrcode").innerHTML = "";,否则每点击一次按钮就会多一个二维码

你可能感兴趣的:(前端,vue)