vue 二维码生成qrcodejs2

vue 二维码生成qrcodejs2

之前写h5的分享页，所以要生成个二维码方便分享图片，所以就查到了qrcodejs2这个插件，过了挺长一段时间了，复习一下：

步骤：

1、安装qrcodejs2插件，在控制台输入：

npm install qrcodejs2 --save

2、在main.js里引入：

import QRCode from 'qrcodejs2'

3、页面展示：

①：在对应的Html页面中，添加html标签，由于是在微信端分享，所有我在生成的上面覆盖了一个透明的图片，让微信用户长点击就能保存二维码；

<div class="erwei">
            <div id="qrcode" ref="qrcode"></div>
            <div class="btn">
              <!-- 长按保存至相册 -->
              <img :src="qrcodeImgSrc" class="qrcode-img" />
            </div>
          </div>

②：配置，在methods方法里配置：

    qrcode() {
      let that = this;
      let qrcode = new QRCode("qrcode", {
        width: 130,
        height: 130,
        text: this.text, // 二维码地址
        colorDark: "#000",
        colorLight: "#fff",
      });
      let myCanvas = document
        .getElementById("qrcode")
        .getElementsByTagName("canvas")[0];
      this.qrcodeImgSrc = myCanvas.toDataURL("image/png");
    },
    down() {
      this.$toast("长按二维码保存图片");
    },

③：看情况什么石油调用就好了

this.qrcode()；