vue3 生成二维码 qrcodejs2-fix

1、安装qrcodejs2-fix

npm install qrcodejs2-fix

2、引入qrcodejs2-fix

import QRCode from 'qrcodejs2-fix';

3、在页面中定义容器

<div id="code"></div>

4、定义生成二维码的函数

const getCode = () => {
  document.getElementById("code").innerHTML = ""; //清空标签内原有数据，防止多次点击生成多个二维码
  new QRCode(document.getElementById("code"), {
    text: '000000'
  });
};

5、调用函数

<a-button @click="getCode">点击获取二维码</a-button>

 

QRCode参数说明

参数	说明	默认值
text	需要编码的文字内容	-
width	图像宽度	256
height	图像高度	256
colorDark	前景色	#000000
colorLight	背景色	#ffffff
correctLevel	容错级别，可设置为：QRCode.CorrectLevel.L、QRCode.CorrectLevel.M、QRCode.CorrectLevel.Q、QRCode.CorrectLevel.H	QRCode.CorrectLevel.L
typeNumber	二维码类型（1~40，输入 0 以自动检测）	4

注：在dialog弹窗里生成二维码第一次点击时 dialogFormVisible.value=false，二维码生成时会找不到对象可以用nextTick（）函数

将二维码生成代码放到nextTick（）函数里

//this.$nextTick()
nextTick(()=>{
            document.getElementById("qr").innerHTML = '';
            new QRCode('qr', {
                  text: formData.value.pbid,
                        width: 50,
                        height: 50,
                        colorDark: '#000000',    //二维码颜色
                        colorLight: "#ffffff"    //背景颜色
                });
                
        });

vue.js中this.$nextTick()就是起到了一个等待数据的作用，等到DOM更新之后再执行代码。