lis8.0-vue3/src/components/contextMenu/index.vue

<template>
  <div class="context-menu-wrapper" @contextmenu.prevent="handleContextMenu($event)">
    <!-- 插槽：包裹需要绑定右键菜单的内容 -->
    <slot />

    <!-- 右键菜单 -->
    <div v-if="visible" class="hospital-menu" :style="{
      top: `${top}px`,
      left: `${left}px`,
      display: visible ? 'block' : 'none',
      width: `${menuWidth}px`
    }" @click.stop @contextmenu.prevent>
      <template v-for="(item, index) in items" :key="index">
        <div v-if="item.type === 'divider'" class="menu-divider"></div>
        <div v-if="item.type !== 'divider'" class="menu-item" :class="{
          danger: item.danger,
          disabled: item.disabled
        }" @click="handleItemClick(item)">
          <span class="menu-shortcut" v-if="item.shortcut">{{ item.shortcut }}</span>
          <span class="menu-label">{{ item.label }}</span>
        </div>
      </template>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, onUnmounted, computed } from 'vue';
import { ContextMenuItem } from '@/types/index';
import emitter from '@/utils/mitt';

// 组件Props
const props = withDefaults(defineProps<{
  items: ContextMenuItem[];
  autoClose?: boolean;
  menuWidth?: number | string;
}>(), {
  autoClose: true,
  menuWidth: 180,
});

// 组件Emits
const emit = defineEmits<{
  (e: 'select', item: ContextMenuItem): void;
  (e: 'open'): void;
  (e: 'close'): void;
}>();

// 菜单状态
const visible = ref(false);
const top = ref(0);
const left = ref(0);

const handleContextMenu = (e: MouseEvent) => {
  // 打开当前菜单关闭其他菜单
  emitter.emit('closeAllContextMenus');

  top.value = Math.min(e.clientY, window.innerHeight - 200);
  left.value = Math.min(e.clientX, window.innerWidth - 200);
  visible.value = true;
  emit('open');
};

// 处理菜单项点击
const handleItemClick = (item: ContextMenuItem) => {
  if (item.disabled) return;
  emit('select', item);


  if (props.autoClose !== false) {
    hideMenu();
  }
};

// 隐藏菜单
const hideMenu = () => {
  visible.value = false;
  emit('close');
};

// 点击外部区域关闭菜单
const handleClickOutside = (e: MouseEvent) => {
  hideMenu();
};

// 键盘事件处理 
const handleKeyDown = (e: KeyboardEvent) => {
  if (!visible.value) return;
  // console.log('e==>', e);
  if (e.key === 'Escape') {
    hideMenu();
  }
  if (e.key === 'e') {
    console.log('e==>', e);
  }

};


onMounted(() => {
  document.addEventListener('click', handleClickOutside);
  document.addEventListener('keydown', handleKeyDown);

  emitter.on('closeAllContextMenus', () => {
    if (visible.value) {
      hideMenu();
    }
  });
});

// 卸载时移除事件监听
onUnmounted(() => {
  document.removeEventListener('click', handleClickOutside);
  document.removeEventListener('keydown', handleKeyDown);
  emitter.off('closeAllContextMenus');
});
</script>

<style scoped>
.context-menu-wrapper {
  position: relative;
  height: 100%;
}

.hospital-menu {
  position: fixed;
  background-color: #fff;
  border: 1px solid #dcdfe6;
  border-radius: .25rem;
  box-shadow: 0 .125rem .75rem rgba(0, 0, 0, 0.1);
  z-index: 9999;
  padding: .3125rem 0;
  font-size: .8125rem;
  font-family: SourceHanSansCN, SourceHanSansCN;
}

.menu-item {
  padding: .3125rem .625rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  transition: background-color 0.2s;
  /* justify-content: space-between; */
}

.menu-item:hover:not(.disabled) {
  background-color: #e6f7ff;
  color: #165DFF;
}

.menu-item.disabled {
  color: #c0c4cc;
  cursor: not-allowed;
}

.menu-item i {
  margin-right: .5rem;
  font-size: .875rem;
  width: 1rem;
  text-align: center;
}



.menu-divider {
  height: 1px;
  background-color: #e5e7eb;
  margin: .25rem 0;
}

.menu-item.danger {
  color: #f53f3f;
}

.menu-item.danger:hover:not(.disabled) {
  background-color: #fff1f0;
  color: #f53f3f;
}

.menu-shortcut {
  color: #909399;
  margin-right: .3125rem;
}
</style>