cloudfile-ui/src/components/RightMenu/index.vue

<template>
  <!-- 右键唤出的菜单 -->
  <div
    class="right_menu"
    :style="{ left: fileRightXY.left + 'px', top: fileRightXY.top + 'px' }"
  >
    <div class="menu_item" @click="folderClick(null, null)">
      <img src="@/assets/images/trash.png" alt="" />
      <span class="shouzhi">打开</span>
    </div>
    <div class="menu_item" @click="collectFolder">
      <img src="@/assets/images/collect.png" alt="" />
      <span class="shouzhi">取消收藏</span>
    </div>
  </div>
</template>

<script setup>
import {
  ref,
  computed,
  reactive,
  defineComponent,
  watch,
  onMounted,
  defineExpose,
} from "vue";
const props = defineProps({
  fileRightXY: {
    type: String,
    default: false,
  },
  foldertop: {
    type: String,
    default: "",
  },
});
</script>

<style lang="scss" scoped>
@import "@/assets/styles/my-common.scss";
.right_menu {
  width: 156px;
  position: absolute;
  padding: 8px;
  box-shadow: 0px 2px 10px 1px rgba(199, 203, 216);
  border-radius: 4px 4px 4px 4px;
  border: 1px solid gray;
  background-color: #fff;
  z-index: 10000;

  .menu_item {
    width: 100%;
    height: 30px;
    border-radius: 4px 4px 4px 4px;
    line-height: 30px;
    display: flex;
    margin: 5px auto;
    align-items: center;
    font-size: 13px;

    &:hover {
      background-color: #f5f7f9;
    }

    span {
      margin-left: 4px;
    }
  }
}
</style>