由于qrcodejs的兼容性問題液斜，需要在vue3中引入qrcodejs2-fix才能正常生成二維碼。
1拜秧、在package.json文件中添加依賴：
"dependencies": {
……
"qrcodejs2-fix": "^0.0.1"
}
2妖混、在工程根目錄執(zhí)行命令：
npm install
在工程中安裝相關(guān)依賴包老赤。
3、在vue文件中導(dǎo)入模塊qrcodejs2-fix：
import QRCode from 'qrcodejs2-fix';
4制市、在頁面中定義二維碼輸出容器：
<div id="imgContainer"></div>
5抬旺、定義生成二維碼函數(shù)：
const generateCode = () => {
document.getElementById("imgContainer").innerHTML = ""; //1
new QRCode(document.getElementById("imgContainer"), {
text: 'https://www.baidu.com'
});
};
包含注釋“//1”行的代碼是清空輸出容器中的內(nèi)容，避免多次點(diǎn)擊按鈕后生成多個(gè)二維碼圖片祥楣。
6开财、定義按鈕調(diào)用函數(shù)生成二維碼圖片
<a-button type="primary" @click="generateCode">點(diǎn)擊獲取二維碼</a-button>
7、QRCode參數(shù)說明
new QRCode(container, options);
| 參數(shù) | 說明 |
|---|---|
| container | 容器误褪，自動(dòng)輸入的頁面元素（一般是div） |
| options | 二維碼圖片參數(shù) |
圖片參數(shù)包括：
| 參數(shù) | 說明 | 默認(rèn)值 |
|---|---|---|
| text | 需要編碼的文字內(nèi)容 | - |
| width | 圖像寬度 | 256 |
| height | 圖像高度 | 256 |
| colorDark | 前景色 | #000000 |
| colorLight | 背景色 | #ffffff |
| correctLevel | 容錯(cuò)級(jí)別责鳍，可設(shè)置為：QRCode.CorrectLevel.L、QRCode.CorrectLevel.M兽间、QRCode.CorrectLevel.Q历葛、QRCode.CorrectLevel.H | QRCode.CorrectLevel.L |
| typeNumber | 二維碼類型（1~40，輸入 0 以自動(dòng)檢測(cè)） | 4 |
