使用主要是兩個點要注意纳本，1是生成二維碼的時機，2是避免在HTML中寫{{data.userInfo.nickname}}這樣的數(shù)據(jù)格式腋颠。
首先安裝組件
npm install qrcodejs2 --save
然后頁面引入
import QRCode from "qrcodejs2";
html部分：
<div id="qrCode" ref="qrCodeDiv"></div>
生成的時間根據(jù)自己需要來做繁成，在接口請求完成，或者是頁面截圖生成之后等淑玫。
mounted() {
this.BindQRCode();
},
根據(jù)若是二維碼內(nèi)容是固定的則直接寫死就好巾腕，若是變化的則根據(jù)具體需求來拼接text。
//生成二維碼
BindQRCode: function() {
new QRCode(this.$refs.qrCodeDiv, {
text: `http://localhost:8080/testUrl/myGrades?uid=${this.userInfo.uid}`,
width: 60,
height: 60,
colorDark: "#333333", //二維碼顏色
colorLight: "#ffffff", //二維碼背景色
correctLevel: QRCode.CorrectLevel.L //容錯率絮蒿，L/M/H
});
},
用這個需要注意的是不要在HTML里寫userInfo.list.day這樣的代碼尊搬，不然會與二維碼插件沖突報錯，最好是把這個頁面需要用到的數(shù)據(jù)在接口里定義好土涝，比如
//接口返回res
res => {
let allInfo = res;
console.log(this.allInfo);
this.nickname = allInfo.showInfo.nickname;
this.sex = allInfo.user_info.parents_sex;
this.today = allInfo.user_info.today;
this.initimg();
},
export default {
data() {
return {
show: false,
success: false,
test: "",
nickname: '',
sex: '',
dataURL: "",
today: '',
dataUrltext: ""
};
},
}
把需要用到的一些數(shù)據(jù)定義好放到data里佛寿，用的時候直接取nickname而不是this.allInfo.showInfo.nickname;
