vue3中使用qrcodejs2-fix插件生成二维码

场景

在项目开发中，页面二维码展示不一定是直接使用后端返回的图片连接，可能需要前端生成二维码。本文是在vue3中使用qrcodejs2-fix。

一.安装qrcodejs2-fix

npm install qrcodejs2-fix

二.在相关vue文件中导入

import QRCode from 'qrcodejs2-fix';//在需要使用的vue文件中导入即可

三.HTML代码

<!-- 二维码输出容器 -->
<div id="qrCodeBox"></div>
<!-- 按钮点击事件 -->
<button @click="getQrCode()">获取二维码</button>	

四.JavaScript代码

const getQrCode = () => {
  //清空该元素内内容
  document.getElementById("qrCodeBox").innerHTML = ""; 
  new QRCode(document.getElementById("qrCodeBox"), {
    //需要编码的文字内容或者URL
    text: 'https://Ghmin',
    width: 100, //二维码宽
    height: 100,//二维码高
  });
};

五.QRCode说明

new QRCode(element, parameter); 
//element 第一个参数为二维码容器,即页面元素
//parameter 生成二维码图片的参数 

六.在弹窗dialog中展示。

在实际开发中，展示二维码可能是打开一个弹窗而后展示，这个时候照搬上面代码是不行的，因为获取不到对应的dom，所以这里需要使用nextTick()函数。

//传入需要转码的url
const getQrCode = (url) => {
  //打开弹窗dialog
  qrOpen.value = true
  //使用nextTick()等到DOM更新之后再执行代码
  nextTick(() => {
    document.getElementById("qrCodeBox").innerHTML = ""; 
    new QRCode(document.getElementById("qrCodeBox"), {
      text: url
    });
  })
};