前端页面中根据链接随机生成二维码
1、需要安装qrcodejs2
npm install qrcodejs2 -save
2、在所需要的页面中引入
import QRCode from 'qrcodejs2'
3、页面中二维码的区域
<div class="item-pic" id="`qrcode"></div>
4、生成二维码并且展示
crateQRcode (codeItem) {
// 生成二维码
new QRCode('qrcode', {
width: 96, //宽度
height: 96, // 高度
text: codeItem.url, // 二维码内容--一般为后端传递过来的链接地址,当扫码二维码的时候,会进行相应的跳转
render: 'canvas' ,// 设置渲染方式(有两种方式 table和canvas,默认是canvas)
})
},
// 展示二维码
showQRcode () {
this.$nextTick(() => {
this.crateQRcode()
})
})
},
5、在页面挂载完成的时候,进行调用
this.showQRcode();
按照以上步骤进行,即可在页面中看到效果