Vue生成二维码 qrcodejs2并解决二维码重复

QRCode.js是制作QRCode的javascript库。QRCode.js支持跨浏览器的HTML5 Canvas和DOM中的表标签。QRCode.js没有依赖。

官网地址：qrcode.js

安装方式：

npm i qrcodejs2

实现效果：

 使用方式：

1、引入和注册

import QrCode from './QrCode.vue'
components: {QrCode },

2、调用方法生成二维码

// 生成二维码
    qrCodeGeneration() {
        let qrcode = new QRCode("qrcode", {
          width: 260,
          height: 260,
          text: "https://www.baidu.com/",
          render: "canvas",
        });
    },

3、当生成二维码的方法被多次调用时，会出现二维码重复的问题，如图：

4、解决重复的问题

// 生成二维码
    qrCodeGeneration(url) {
      if (this.qrcode) {
        // 如果二维码对象已存在，则更新链接
        this.qrcode.clear(); // 清除之前的二维码
        this.qrcode.makeCode(url); // 生成新的二维码
      } else {
        // 如果二维码对象不存在，则创建新的二维码对象
        this.qrcode = new QRCode("qrcode", {
          width: 260,
          height: 260,
          text: url,
          render: "canvas",
        });
      }
    },