vue根据URL链接生成二维码
1.下载
npm install qrcode --save-dev
2.引入(在所需要的页面中引入)
import QRCode from “qrcode”; //引入生成二维码插件
3.生成二维码
<img :src="QRImgUrl" />
<script>
import QRCode from "qrcode";
export default {
name: "phone",
data() {
return {
QRImgUrl: "",
QRlink: "https://152.136.245.230:7784/play/index.html?uid=1&zid=1&roomid=53",
};
},
mounted() {},
created() {
this.getQRcode();
},
methods: {
getQRcode() {
let opts = {
errorCorrectionLevel: "L", //容错级别
type: "image/png", //生成的二维码类型
quality: 0.3, //二维码质量
margin: 4, //二维码留白边距
width: 256, //宽
height: 256, //高
text: "", //二维码内容
color: {
dark: "#666666", //前景色
light: "#fff", //背景色
},
};
QRCode.toDataURL(this.QRlink, opts, (err, url) => {
if (err) throw err;
//将生成的二维码路径复制给data的QRImgUrl
this.QRImgUrl = url;
});
},
},
};
</script>