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