qrcode.js实现二维码展示

发表于2021-12-29|更新于2022-05-07|周边组件

|字数总计:160|阅读时长:1分钟

需求说明：在vue项目中，根据后台返回借助qrcode.js动态生成二维码展示在页面上

qrcode.js下载地址：http://davidshimjs.github.io/qrcodejs/

1、vue项目引入qrcode

npm install qrcodejs2

2、在二维码页面引入qrcode

import QRCode from ‘qrcodejs2’

3、使用

//页面定义
<div id="qrcode2" ref="qrcode2" class="icon-m2" style="margin:0 auto;width:200px"></div>

//
qrcode() {
	var qrcode2 = new QRCode('qrcode2', {
                width: 200,
                height: 200,
                text: 'https://123.com' + this.value // 二维码中的信息
  });
}

//当后台返回value信息后调用二维码生成
this.qrcode();