vue使用QRCode.js 生成二维码

1.开发环境vue
2.电脑系统 windows10专业版
3.在使用vue开发的过程中,我们可能根据项目需求需要实现二维码,下面我来分享如何在vue中使用QRCode.js生成二维码,希望对你有所帮助。
4.废话不多说,直接操作

//在终端(以管理员身份执行如下)
npm i qrcodejs2 --save

//然后导入(根据项目需求选择在mian.js中导入还是组件内部导入)
import QRCode from 'qrcodejs2'

5.在template中添加如下代码:

6.在methods中添加如下代码:

bindQRCode(url,chendom) {
      var qrCode = new QRCode(chendom, {
        width: 100, //二维码宽度,单位像素
        height: 100, //二维码高度,单位像素
        text: url, //二维码内容:二维码扫描之后访问的地址
        colorDark: "#000000", //前景色
        colorLight: "#ffffff", //背景色
        correctLevel: QRCode.CorrectLevel.H, //容错级别
      });
      // qrcode.clear(); //清除二维码
      // qrcode.makeCode(url); //设置二维码内容text,生成另一个新的二维码。
    },

7.在mounted中添加如下代码:

this.bindQRCode('https://www.baidu.com',this.$refs.qrCodeDiv);

8.本期的分享到了就结束啦,希望对你有所帮助,让我们一起努力走向巅峰。