electripper-v2-ui/src/views/bst/device/components/DeviceSn.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://wx.ccttiot.com/x/d?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>