1.中间无logo图的二维码
- 执行一个命令 npm install qrcodejs2
2.并将它引入到组件中并注册在组件中
**import QRCode from 'qrcodejs2'**
并注册
**components: {
QRCode
}**
3.将结构放在template中 例如 :
<div id="qrcode" class="codeQr" ref="qrCodeDiv" ></div>
4.在 mounted中定义一个函数 this.qrcode()
qrcode () {
let t = this
// let querqrcode = new QRCode(this.$refs.qrCodeDiv, {
// text: 'http://192.168.0.xx:8765/#/SignAgency?code=' + t.userInfo.account,
text: this.config.link, //生成二维码的连接
width: 192,
height: 192,
colorDark: '#333333', // 二维码颜色
colorLight: '#ffffff', // 二维码背景色
correctLevel: QRCode.CorrectLevel.L // 容错率,L/M/H
})
// console.log(querqrcode)
},
然后就成功了
2.中间有logo图的二维码
1.执行一下命令 npm install vue-qr --save 安装 vue-qr插件 到项目中
2.并将它引入到组件中并注册在组件中
···
import VueQr from 'vue-qr’
components: {
VueQr
}
···
3.将结构放在template中 例如 :
<vue-qr class="codeQr" :logoSrc="config.logo" :text="config.link" ></vue-qr>
// logoSrc 是放中间图片的路径 // text 是存放二维码的连接
然后就成功了呀! 哈哈哈哈哈哈哈哈哈 这种很简单哦!