vue使用qrcodejs2生成二维码

前端实现生成二维码功能

1、安装 qrcodejs2

npm install qrcodejs2 --save 

2、引入qrcodejs2

//在main.js或者页面中引入
import QRCode from "qrcodejs2";

3、具体代码

methods: {
        qrcodeRender(id) {
            this.$refs.qrcode.innerHTML = "";
			//获取当前的ip和端口，不要写死
            const ipPort = document.location.protocol + "//" + document.location.host;
            this.qrCodeImg = null;
            this.qrCodeImg = new QRCode(this.$refs.qrcode, {
                width: 100,
                height: 100,
                text: ipPort + "/#/stationInfoH5?stationId=" + id, // 二维码地址
                colorDark: "#000",
                colorLight: "#fff",
                correctLevel: QRCode.CorrectLevel.H,
            });
        },
}

4、调用

this.$nextTick(() => {
    this.qrcodeRender(this.stationId);
 });