1.安装qrcodejs2
npm install qrcodejs2 --save
2.在页面中引入
import QRCode from "qrcodejs2"
3.在html中 必须为id值,这里用来存放生成的二维码
<div id="qrcode"></div>
4.data中写入生成二维码内容或链接
data(){
return{
link:'https://www.baidu.com',
}
}
5.js方法编写
着重强调当时这里因为eslist语法报错 加上注释 // eslint-disable-line no-unused-vars
qrcode(){
let qrcode = new QRCode('qrcode', { // eslint-disable-line no-unused-vars
width: 124,
height: 124, // 高度
text: this.link, // 二维码内容
// render: 'canvas' , // 设置渲染方式(有两种方式 table和canvas,默认是canvas)
background: '#fff', // 背景色
foreground: '#ff0' // 前景色
})
}
6.页面调用 必须要this.$nextTick 否则会出现 appendChild null 就是id为qrcode的dom获取不到 返回结果为null 根据项目情况进行调用,我是放在created中调用
this.$nextTick (function () {
this.qrcode();
})