基于 qrcode 二维码生成插件,
先下载npm i --save qrcode
引用页:
<rqcode :dialog="dialog" :uuid="uuid" :imei="imei" @dialogChange="dialog = false"/>
import rqcode from "./componenrts/RQcode";
export default {
components: {
rqcode
},
data() {
return {
dialog: false,
imei: "",
uuid: "",
};
},
methods:{
// 生成二维码事件
getRQcode(){
this.uuid = id;
this.imei = imei;
// 以上为参数 ,可以自定义添加或者组合
this.dialog = true;
},
}
};
生成二维码组件:
<template>
<el-dialog
title="设备二维码"
:visible="dialogVisible"
width="30%"
close-on-press-escape
close-on-click-modal
show-close
>
<div style="text-align: center;">
<canvas ref="myCanvas" id="msg"></canvas>
<p>uuid: {{ uuid }}</p>
</div>
<span slot="footer" class="dialog-footer">
<el-button @click="dialogVisible = false; $emit('dialogChange', false)">关 闭</el-button>
<el-button type="primary" @click="downRQcode">下 载</el-button>
</span>
</el-dialog>
</template>
<script>
import QRCode from "qrcode";
export default {
props: {
uuid: {
default: ""
},
imei: {
default: ""
},
dialog: {
default: false
}
},
data() {
return {
dialogVisible: false
};
},
watch: {
dialog(e) {
this.dialogVisible = e;
this.useqrcode(this.uuid)
}
},
methods: {
// 生成二维码
useqrcode(val) {
const that = this;
setTimeout(() => {
var canvas = document.getElementById("msg");
QRCode.toCanvas(canvas, val, function(error) {
if (error) console.error(error);
console.log("QRCode success!");
});
}, 500);
},
// 下载图片按钮
downRQcode() {
this.saveImg();
},
// 下载图片
saveImg() {
const canvasData = document.getElementById("msg");
const a = document.createElement("a");
a.href = canvasData.toDataURL();
a.download = this.imei;
a.click();
}
}
};
</script>
源码:https://github.com/hlbj105/blog/blob/master/Vue/RQcode.vue