前言:
目前总结的二维码方法有三种,两种是不带logo,1、是 qrcode,2、是 qrcodejs2 ,3、是用 vue-qr(带logo)
一、不带logo的两种用法
实现效果:
步骤(qrcode ):
1、安装:
cnpm install qrcodejs2 --save
2、调用:
import QRCode from 'qrcode' js中调用
<canvas ref="qrCode" id='qrCode'></canvas> template中添加容器
3、methods中写方法
useqrcode(){
var canvas = document.getElementById('qrCode');
// var canvas = this.$refs.qrcode;
let content = this.person.id==undefined?'':this.person.id+'@1';//二维码内容,如果是地址会跳转过去
QRCode.toCanvas(canvas, content, function (error) {
if (error){
console.error(error)
}else{
console.log('QRCode success!');
}
})
},
4、mounted中调用(注意,不能再created中调用)
mounted() {
this.useqrcode();//渲染二维码
},
步骤(qrcodejs2 ):
1、安装:
cnpm install qrcodejs2 --save
2、调用:
import QRCode from 'qrcodejs2' js中调用
<div ref="qrCodeDiv" ></div> template中添加容器
***注意,这里和qrcode的区别就是容器的区别,
3、methods中写方法
/**
* 初始化绘制二维码
* */
useqrcode(){
var canvas = this.$refs.qrCodeDiv;
// var canvas = document.getElementById('qrcode');
new QRCode(canvas , {
text: '11111111' ,//二维码内容,如果是路径直接跳转
width: 360,
height: 360,
colorDark: '#000', // 二维码颜色
colorLight: '#ffffff', // 二维码背景色
correctLevel: QRCode.CorrectLevel.L// 容错率,L/M/H
})
},
4、mounted中调用(注意,不能再created中调用)
mounted() {
this.useqrcode();//渲染二维码
},
二、带logo的用法
实现效果:(这里中间是我自己扣扣截图百度网盘的)
步骤(vue-qr)
1、安装:
cnpm install vue-qr --save
2、调用:(还要注册,一定要按步骤来)
(1) js中调用
import VueQr from ' vue-qr '
(2)template中添加容器
<vue-qr :logoSrc="imgUrl" text="Hello world!" :size="360"></vue-qr>
支持参数