在vue中生成二维码

在vue中生成二维码
这里使用的是一个插件qrCode
使用npm安装

npm i qrcodejs2 --save

安装之后在要使用的页面引入一下

import QRCode from “qrcodejs2”
基本配置就完成了，接下来在html与js里写东西就可以了

html

<div id="qqq">
           <div class="qrCode" ref="qrCodeUrl" ></div>
        </div>

js

creatQrCode() {
      var qrcode = new QRCode(this.$refs.qrCodeUrl, {
        // text: this.ermsg, //可以是链接，也可以是文本
        width: 200, //二维码的宽度
        height: 200, //二维码的高度
        colorLight: "#ffffff", //二维码背景色
        colorDark: "#000000", //二维码前景色，以实现红码为例
        correctLevel: QRCode.CorrectLevel.H, //纠错等级
      });
    },

然后调用一下这个方法就可以生成二维码了
css

#qqq {
  /* background-color: #111; */
  width: 300px;
  height: 300px;
  margin: 0 auto; /*水平居中*/
  position: relative;
}

.qrCode {
  display: inline-block;
  margin: 14px auto;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-100px, -100px);
}
.qrCode img {
    width: 200px;
    height: 200px;
    background-color: #fff; 
    padding: 6px; 
  }

这样就可以生成一个二维码了，但是在使用是发现当你多次调用这个方法时会多次生成二维码，这里外面需要进行一下判断，然后把之前生成的二维码清空掉

在data中声明一个qrCodeUrl:null，在下面进行一下判断
creatQrCode() {
      if(this.qrCodeUrl){
      var qrcode = new QRCode(this.$refs.qrCodeUrl, {
        text: this.ermsg, //可以是链接，也可以是文本
        width: 200, //二维码的宽度
        height: 200, //二维码的高度
        colorLight: "#ffffff", //二维码背景色
        colorDark: "#000000", //二维码前景色，以实现红码为例
        correctLevel: QRCode.CorrectLevel.H, //纠错等级
      });
      }else{
        this.$refs.qrCodeUrl.innerHTML = ""//当从新调用时把之前生成的二维码清空
        var qrcode = new QRCode(this.$refs.qrCodeUrl, {
        text: this.ermsg, //可以是链接，也可以是文本
        width: 200, //二维码的宽度
        height: 200, //二维码的高度
        colorLight: "#ffffff", //二维码背景色
        colorDark: "#000000", //二维码前景色，
        correctLevel: QRCode.CorrectLevel.H, //纠错等级
        });
      }
    },