vue 链接生成二维码(QRCode)

1、安装qrcodejs2

        cnpm i qrcodejs2 --save

2、页面中引入

        import QRCode from "qrcodejs2";

3、页面展示

        <div id="qrcode" ref="qrcode"></div>

4、QRCode配置(methods)

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

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

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

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

                });

        }

5、调用

        this.$nextTick(() => {

                this.qrcode();

         });

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

html

        <div v-for="(item,index) in this.qrCodeList" :key="index" class="qrcode-box" :id='"qrcode" + index' ref="qrcode">

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 // 设置二维码内容或跳转地址

                    });

              });

        },


最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容