1、安装
npm install qrcodejs2
2、页面使用
<script>
import QRCode from 'qrcodejs2'
export default {
data() {
return {
qrcode: null
}
},
mounted() {
this.$nextTick(() => {
this.creatQrcode()
})
},
methods: {
// 生成二维码
creatQrcode() {
if (this.qrcode) {
this.qrcode.clear()
}
this.qrcode = new QRCode(this.$refs.qrCodeDiv, {
text: 'https://www.baidu.com/s?wd=d&rsv_spt=1&rsv_iqid=0xd0b3a54900aba34b&issp=1&f=8&rsv_bp=1&rsv_idx=2&ie=utf-8&tn=baiduhome_pg&rsv_enter=0&rsv_dl=tb&rsv_sug3=2&rsv_sug1=1&rsv_sug7=100&rsv_btype=i&prefixsug=d&rsp=5&inputT=2172&rsv_sug4=2250', // 二维码的内容
width: 128,
height: 128,
colorDark: 'transparent',
colorLight:'#000'，
correctLevel: QRCode.CorrectLevel.M // 容错级别 容错级别有：（1）QRCode.CorrectLevel.L （2）QRCode.CorrectLevel.M （3）QRCode.CorrectLevel.Q （4）QRCode.CorrectLevel.H
})
this.qrcode._el.title = '' // 鼠标移入二维码会展示原生title，如果不需要就可以将title置为空
}
}
}
</script>
注意：二维码的内容越丰富，生成的二维码就会越密集，可能会导致生成的二维码扫码不出来，如果没办法减少二维码的内容，唯一的办法就是降低容错率+放大二维码的尺寸，二维码才可能会识别出来，但识别度也不会很高，所以为了提高生成的二维码的识别度，二维码的内容尽可能不要太多。
