1.安装 qrcodejs2
npm install qrcodejs2 --save
2.引入资源
import QRCode from "qrcodejs2";
3.写入html
<div id="qrcode" ref="qrCodeDiv"></div>
4.生成二维码
data() {
return {
text: "",
userid: null,
id: ""
};
},
computed: {
qrcodeurl() {
let baseURL = "https://baidu.com";
let TEST= this.userid;
let TEST1= this.id;
let TEXT= encodeURIComponent(this.text);
if (TEST&& TEST1&& TEXT) {
return `${baseURL}/${TEST}/${TEST1}?text=${TEXT}`;
}
}
},
watch: {
qrcodeurl(newurl) {
if (newurl) {
// 先清空原来的内容
this.$refs.qrCodeDiv.innerHTML = "";
this.mutationCallBack();
}
}
},
methods: {
// 调用生成二维码,必须使用$nextTick
mutationCallBack() {
let _this = this;
_this.$nextTick(() => {
_this.createQrCode();
});
},
createQrCode() {
//创建二维码,qrcode(<div id="qrcode" ref="qrCodeDiv"></div>)
let qrcode = new QRCode("qrcode", {
width: 106,
height: 106,
text: this.qrcodeurl
});
},}