在vue中使用qrcodejs2生成二维码

安装

npm install qrcodejs2 --save

使用

需要使用的地方直接引用

import QRCode from 'qrcodejs2

注意:这个库生成二维码的时候，如果文本长度在215左右就会报错

// 在弹出框使用
<template>
  <div style="margin:0 auto">
    <el-button type="text" @click="open">点击打开 Dialog</el-button>

    <el-dialog :visible.sync="dialogVisible" width="30%">
      <div id="root" ref="qrCodeUrl"></div>
    </el-dialog>
  </div>
</template>

<script>
import QRCode from "qrcodejs2";
export default {
  name: "",
  components: {},
  data() {
    return {
      qrcode: null,
      dialogVisible: false,
      qrcodeStatus: true
    };
  },
  created() {},
  mounted() {},
  methods: {
    open() {
      this.dialogVisible = true;
      this.creatQrCode();
    },
    creatQrCode() {
      this.qrcode = new QRCode(this.$refs.qrCodeUrl, {
        text: "https://www.baidu.com/", // 需要转换为二维码的内容
        width: 100,
        height: 100,
        colorDark: "#000000",
        colorLight: "#ffffff",
        correctLevel: QRCode.CorrectLevel.H
      });
    }
  }
};
</script>
<style scoped></style>

出现错误

报错原因:是没有获取到节点,在creatQrCode中加入$nextTick


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

现在我们会发现,弹出框打开关闭,打开关闭.....会出现这样的情况

在第二次打开的时候没有去清除上一次保存的二维码,需要先清除上一次二维码

qrcode.clear();
或者
this.$refs.qrCodeUrl.innerHTML = "";

温馨提示:可以给单个二维码加css样式进行优化

渲染结构如图; 可以看到是在获取节点的标签(root)下,出现canvas标签,紧跟一个img标签,

没有效果写法
img{
  width: 150px;
  height: 150px;
}

有效
/deep/ img{
......
}

这里还可以使用获取到root下的所有img标签

let imgs = document.querySelectorAll('.root > img')// 获取到是类数组
imgs.forEach(e=>{
    e.style.width = '150px'
})

参数API

QRCode参数

new QRCode(element, option)

名称	默认值	说明
element	-	承载二维码的DOM元素的ID
option	-	参数设置

Option参数

名称	默认值	说明	备注
text	-	二维码承载的信息	如果是string那没有什么好说的。如果是url的话，为了微信和QQ可以识别，连接中的中文使用encodeURIComponent进行编码
width	256	二维码宽度	单位像素（百分比不行）
height	256	二维码高度	单位像素（百分比不行）
colorDark	'#000000'	二维码前景色	英文\十六进制\rgb\rgba\transparent都可以
colorLight	'#ffffff'	二维码背景色	英文\十六进制\rgb\rgba\transparent都可以
correctLevel	QRCode.CorrectLevel.L	容错级别	由低到高 QRCode.CorrectLevel.L QRCode.CorrectLevel.M QRCode.CorrectLevel.Q QRCode.CorrectLevel.H

API接口

名称	参数	说明	使用
clear	-	清除二维码	qrcode.clear()
makeCode	string	替换二维码（参数里面是新的二维码内容）	qrcode.makeCode('new content')

结尾

插件git地址 github.com/davidshimjs…

上述代码使用 elementUI vue

@2021-11-23——《vue中使用qrcodejs2生成二维码》