yvan-window/src/component/Container/DesktopAppView/PortalTarget/index.vue

<template>
  <div
    class="vue-portal-target"
    :style="{ left: left, top: top, display: display }"
    @mousedown.stop=""
  >
    <div
      class="v-menu"
      style="height: auto; width: auto; z-index: 15000"
      v-if="selectList.length"
    >
      <div class="v-trap-focus-indicator"></div>
      <div class="v-trap-focus-body">
        <div
          class="v-menu-item"
          :class="select.cls"
          v-for="(select, selectIndex) in selectList"
          :key="select.id"
          @mouseenter="mouseenterSelect(selectIndex)"
          @mouseleave="mouseleaveSelect(selectIndex)"
          @click="clickSelect(select)"

        >
          {{ select.text }}
        </div>
      </div>
      <div class="v-trap-focus-indicator"></div>
    </div>
  </div>
</template>

<script>
export default {
  mounted() {
    this.$bus.on("showPortalTarget", this.showPortalTarget);
    this.$bus.on("hiddenPortalTarget", this.hiddenPortalTarget);
  },
  data() {
    return {
      left: "457px",
      top: "184px",
      display: "none",
      selectList: [],
      selectedItem: {},
    };
  },
  methods: {
    //   显示本页面
    showPortalTarget(obj) {
      this.left = obj.left + "px";
      this.top = obj.top + "px";
      this.selectList = obj.selectList;
      this.selectedItem = JSON.parse(JSON.stringify(obj.item));
      this.selectList.forEach((item, index) => {
        if (index === 0) {
          item.cls = "active";
        } else {
          item.cls = "";
        }
      });
      if (this.display === "none") {
        this.display = "block";
        window.addEventListener('mousedown',this.hiddenPortalTarget)
      }
    },
    // 隐藏本页面
    hiddenPortalTarget() {
      console.log(1)
      if (this.display === "block") {
        this.display = "none";
      }
      window.removeEventListener('mousedown',this.hiddenPortalTarget)
    },
    // 移入选择项改变背景颜色
    mouseenterSelect(selectIndex) {
      this.selectList.forEach((item, index) => {
        if (index === selectIndex) {
          item.cls = "active";
        } else {
          item.cls = "";
        }
      });
    },
    // 移出选择项改变背景颜色
    mouseleaveSelect(selectIndex) {
      this.selectList[selectIndex].cls = "";
    },
    // 点击选择项
    clickSelect(select) {
      this.selectedItem.selectList.forEach((item) => {
        if ((item.text = "添加到桌面")) {
          item.text = "删除快捷方式";
        }
      });
      if (select.text === "添加到桌面") {
        this.$bus.emit("pushShortcutList", this.selectedItem);
      }
      if (select.text === "删除快捷方式") {
        this.$bus.emit("spliceShortcutList", this.selectedItem);
      }
    },
  },
  components: {},
  name: "PortalTarget",
};
</script>