69 lines
1.5 KiB
Vue
69 lines
1.5 KiB
Vue
|
<template>
|
||
|
|
<el-popover
|
||
|
|
placement="top"
|
||
|
|
width="180"
|
||
|
|
trigger="hover"
|
||
|
|
@show="handlePopoverShow"
|
||
|
|
@hide="handlePopoverHide">
|
||
|
|
<div class="qr-code-box">
|
||
|
|
<qr-code v-if="isVisible" ref="qrCode" :text="qrCodeText" :width="150" :height="150"/>
|
||
|
|
<div>{{ sn }} </div>
|
||
|
|
<div class="action-box">
|
||
|
|
<el-button type="text" icon="el-icon-download" size="mini" @click="downloadQrCode">下载二维码</el-button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<template #reference>
|
||
|
|
<slot>
|
||
|
|
<el-button type="text" icon="el-icon-picture" size="mini">二维码</el-button>
|
||
|
|
</slot>
|
||
|
|
</template>
|
||
|
|
</el-popover>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
import QrCode from '@/components/QrCode/index.vue'
|
||
|
|
export default {
|
||
|
|
name: 'DeviceSn',
|
||
|
|
components: {
|
||
|
|
QrCode
|
||
|
|
},
|
||
|
|
props: {
|
||
|
|
sn: {
|
||
|
|
type: String,
|
||
|
|
default: ''
|
||
|
|
},
|
||
|
|
},
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
isVisible: false
|
||
|
|
}
|
||
|
|
},
|
||
|
|
computed: {
|
||
|
|
// 二维码文本
|
||
|
|
qrCodeText() {
|
||
|
|
return "https://wc.chuangtewl.com/xl/xd?s=" + this.sn;
|
||
|
|
},
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
// 下载二维码
|
||
|
|
downloadQrCode() {
|
||
|
|
this.$refs.qrCode.download(`设备二维码_${this.sn}.png`, this.sn);
|
||
|
|
},
|
||
|
|
// 处理 popover 显示
|
||
|
|
handlePopoverShow() {
|
||
|
|
this.isVisible = true;
|
||
|
|
},
|
||
|
|
// 处理 popover 隐藏
|
||
|
|
handlePopoverHide() {
|
||
|
|
this.isVisible = false;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style lang="scss" scoped>
|
||
|
|
.qr-code-box {
|
||
|
|
text-align: center;
|
||
|
|
}
|
||
|
|
</style>
|