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

17 篇文章 0 订阅

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


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

将qrcode.js引入你的页面中

在这里插入图片描述

我把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
      });
    }

在这里插入图片描述
一定要加上document.getElementById("qrcode").innerHTML = "";,否则每点击一次按钮就会多一个二维码

评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值