vue 链接生成二维码(QRCode)

1、安装qrcodejs2

        cnpm i qrcodejs2 --save

2、页面中引入

        import QRCode from "qrcodejs2";

3、页面展示

        

4、QRCode配置(methods)

        qrcode () {
                let qrcode = new QRCode("qrcode", {

                          width: 200, // 二维码宽度,单位像素

                          height: 200, // 二维码高度,单位像素

                          text: "https://www.baidu.com/" // 生成二维码的链接

                });

        }

5、调用

        this.$nextTick(() => {

                this.qrcode();

         });

多个链接生成二维码(直接代码)

html

        

js

        this.$nextTick(() => {

                this.qrcode(this.qrCodeList)

         })

        qrcode(qrCodeList) {

              qrCodeList.forEach((item,index) => {

                    let qrcode = new QRCode("qrcode"+index, {

                          width: 200, // 二维码宽度,单位像素

                          height: 200, // 二维码高度,单位像素

                          text: item // 设置二维码内容或跳转地址

                    });

              });

        },


你可能感兴趣的:(vue 链接生成二维码(QRCode))