Front-end generates QR code

The project needs to generate a QR code on the front end, and the qrcode plugin is used.

old rules

//引入依赖
yarn add qrcodejs2
import QRCode from 'qrcodejs2'

 

//放二维码的盒子，这里用的element-ui  给二维码加载的时候加了个loading,不需要的可以去除，这里默认给盒子一个宽高就不会因为二维码加载造成的页面抖动了
 <div class="codeWrapper" ref="qrCodeUrl" v-loading="qrloading"></div>

       

 creatQrCode(customer, payInfo) {
            //这里后端给的地址只需要域名即可，我们是给了全部地址，所以做了个截取， 截取链接域名，参数自己拼接
            let url = payInfo.data.payUrl;
            if (url.indexOf("?") != -1) {
                url = url.split("?")[0];
            }
            var qrcode = new QRCode(this.$refs.qrCodeUrl, {
                text: `${url}?phone=${customer.mobile}&name=${customer.custName}`, // 需要转换为二维码的地址，域名+参数，域名是后端给的，参数是从其他接口获取的
                width: 200,
                height: 200,
                colorDark: '#000000',
                colorLight: '#ffffff',
                correctLevel: QRCode.CorrectLevel.H
            })
            this.qrloading = false;
        }

 

{{o.name}}

{{m.name}}