1.下載
npm install qrcode --save-dev
2.引入(在所需要的頁面中引入)
import QRCode from “qrcode”; //引入生成二維碼插件
3.生成二維碼
<canvas id="QRCode_header" style="width: 280px; height: 280px"></canvas>
<script>
import QRCode from "qrcode"; //引入生成二維碼插件
export default {
props: [""],
data() {
return {
qrUrl: "",
};
},
watch: {},
mounted() {
this.getQRCode();
},
created() {},
methods: {
getQRCode() {
//生成的二維碼為URL地址js
this.qrUrl= "https://152.136.245.230:7784/play/index.html?uid=1&zid=1&roomid=53";
let opts = {
errorCorrectionLevel: "H", //容錯(cuò)級(jí)別
type: "image/png", //生成的二維碼類型
quality: 0.3, //二維碼質(zhì)量
margin: 0, //二維碼留白邊距
width: 280, //寬
height: 280, //高
text: "http://www.xxx.com", //二維碼內(nèi)容
color: {
dark: "#333333", //前景色
light: "#fff", //背景色
},
};
let msg = document.getElementById("QRCode_header");
// 將獲取到的數(shù)據(jù)(val)畫到msg(canvas)上
QRCode.toCanvas(msg, this.qrUrl, opts, function (error) {
if (error) {
console.log("二維碼加載失敗", error);
this.$message.error("二維碼加載失敗");
}
});
},
},
};
</script>
作者：微微一笑絕絕子
出處：Vue中qrcode的使用方法（生成二維碼插件） / 前端頁面根據(jù)URL鏈接生成二維碼 - 微微一笑絕絕子 - 博客園文章來源：http://www.zghlxwxcb.cn/news/detail-558573.html
本博客文章均為作者原創(chuàng)，轉(zhuǎn)載請(qǐng)注明作者和原文鏈接。文章來源地址http://www.zghlxwxcb.cn/news/detail-558573.html
到了這里，關(guān)于Vue中qrcode的使用方法（生成二維碼插件） / 前端頁面根據(jù)URL鏈接生成二維碼的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
