由于qrcodejs的兼容性问题，需要在vue3中引入qrcodejs2-fix才能正常生成二维码。
1、在package.json文件中添加依赖：
"dependencies": {
……
"qrcodejs2-fix": "^0.0.1"
}
2、在工程根目录执行命令：
npm install
在工程中安装相关依赖包。
3、在vue文件中导入模块qrcodejs2-fix：
import QRCode from 'qrcodejs2-fix';
4、在页面中定义二维码输出容器：
<div id="imgContainer"></div>
5、定义生成二维码函数：
const generateCode = () => {
document.getElementById("imgContainer").innerHTML = ""; //1
new QRCode(document.getElementById("imgContainer"), {
text: 'https://www.baidu.com'
});
};
包含注释“//1”行的代码是清空输出容器中的内容，避免多次点击按钮后生成多个二维码图片。
6、定义按钮调用函数生成二维码图片
<a-button type="primary" @click="generateCode">点击获取二维码</a-button>
7、QRCode参数说明
new QRCode(container, options);
| 参数 | 说明 |
|---|---|
| container | 容器，自动输入的页面元素（一般是div） |
| options | 二维码图片参数 |
图片参数包括：
| 参数 | 说明 | 默认值 |
|---|---|---|
| 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 |
