【Vue】在 vue 2 中使用 qrcodejs2 生成二维码

安装

npm install qrcodejs2

导入

import QRCode from 'qrcodejs2'

配置

vue

1. 编写html，必须需要一个盒子包裹放二维码的div

<div class="wrapper">
            <div id="qrcode_box" ref="qrCodeUrl"></div>
          </div>

2. 在methods中建立配置函数

creatQrCode() {
      const qrcode = new QRCode("qrcode_box", {
        width: 100, //二维码的宽度
        height: 100, //二维码的高度
        text: "https://www.baidu.com/", // 二维码地址
        colorDark: "#000", //二维码颜色
        colorLight: "#fff" //二维码背景颜色
      });
    },

3. 使用，在mounted生命周期中调用函数,必须保证“盒子”先渲染完成，使用this.$nextTick()

this.$nextTick(() => {
      this.creatQrCode();
    });

参考文章

qrcodejs2插件实现二维码生成