65 lines
1.3 KiB
Vue
65 lines
1.3 KiB
Vue
|
<template>
|
||
|
|
<img :src="QRImgUrl" alt="二维码" :width="width" :height="height" />
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
import QRCode from "qrcode";
|
||
|
|
|
||
|
|
export default {
|
||
|
|
name: 'QrCode',
|
||
|
|
props: {
|
||
|
|
// 需要生成二维码的内容
|
||
|
|
text: {
|
||
|
|
type: String,
|
||
|
|
default: null,
|
||
|
|
required: true
|
||
|
|
},
|
||
|
|
width: {
|
||
|
|
type: Number,
|
||
|
|
default: 100
|
||
|
|
},
|
||
|
|
height: {
|
||
|
|
type: Number,
|
||
|
|
default: 100
|
||
|
|
}
|
||
|
|
},
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
QRImgUrl: null,
|
||
|
|
}
|
||
|
|
},
|
||
|
|
watch: {
|
||
|
|
text(val) {
|
||
|
|
this.getQrCode(val);
|
||
|
|
}
|
||
|
|
},
|
||
|
|
created() {
|
||
|
|
this.getQrCode(this.text);
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
// 获取二维码
|
||
|
|
getQrCode(text) {
|
||
|
|
let opts = {
|
||
|
|
errorCorrectionLevel: "L",//容错级别
|
||
|
|
type: "image/png",//生成的二维码类型
|
||
|
|
quality: 0.3,//二维码质量
|
||
|
|
margin: 2,//二维码留白边距
|
||
|
|
width: 128,//宽
|
||
|
|
height: 128,//高
|
||
|
|
text: text,//二维码内容
|
||
|
|
color: {
|
||
|
|
dark: "#333",//前景色
|
||
|
|
light: "#fff"//背景色
|
||
|
|
}
|
||
|
|
};
|
||
|
|
// 根据文本生成二维码
|
||
|
|
QRCode.toDataURL(this.text, opts, (err, url) => {
|
||
|
|
if (err) throw err
|
||
|
|
//将生成的二维码路径复制给data的QRImgUrl
|
||
|
|
this.QRImgUrl = url;
|
||
|
|
});
|
||
|
|
},
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|