1.安装qrcodejs2插件: cnpm i qrcodejs2 -S
2.组件内使用:
import QRCode from 'qrcodejs2'
<template>
<div id="qrcode" ref="qrcode"></div>
</template>
<script>
export default {
data(){
return{
codeUrl:'###########' //生成二维码的路径
}
},
mounted() {
this.$nextTick(() => {
this.qrcode(this.codeUrl);
});
},
methods: {
qrcode(codeUrl) {
let qrcode = new QRCode('qrcode', {
render: "canvas", // 渲染方式有table方式和canvas方式
width: 250, //默认宽度
height: 250, //默认高度
text: codeUrl, //二维码内容
correctLevel: QRCode.CorrectLevel.H, //二维码纠错级别(L,M,Q,H)
background: "#ffffff", //背景颜色
})
}
}
}
</script>
注:1.若需要刷新或关闭二维码,可使用:this.$refs.qrcode.innerHTML = ''
2.若二维码链接路径太长,需降低二维码的纠错级别(correctLevel),才能显示出来
3.codeUrl需为string,若为number则直接返回数字不生成二维码