| 提交 | 用户 | 时间 | ||
| 820397 | 1 | <script lang="ts" setup> |
| H | 2 | import { PropType } from 'vue' |
| 3 | ||
| 4 | import { useDesign } from '@/hooks/web/useDesign' | |
| 5 | import type { RouteLocationNormalizedLoaded } from 'vue-router' | |
| 6 | import { contextMenuSchema } from '@/types/contextMenu' | |
| 7 | import type { ElDropdown } from 'element-plus' | |
| 8 | ||
| 9 | defineOptions({ name: 'ContextMenu' }) | |
| 10 | ||
| 11 | const { getPrefixCls } = useDesign() | |
| 12 | ||
| 13 | const prefixCls = getPrefixCls('context-menu') | |
| 14 | ||
| 15 | const { t } = useI18n() | |
| 16 | ||
| 17 | const emit = defineEmits(['visibleChange']) | |
| 18 | ||
| 19 | const props = defineProps({ | |
| 20 | schema: { | |
| 21 | type: Array as PropType<contextMenuSchema[]>, | |
| 22 | default: () => [] | |
| 23 | }, | |
| 24 | trigger: { | |
| 25 | type: String as PropType<'click' | 'hover' | 'focus' | 'contextmenu'>, | |
| 26 | default: 'contextmenu' | |
| 27 | }, | |
| 28 | tagItem: { | |
| 29 | type: Object as PropType<RouteLocationNormalizedLoaded>, | |
| 30 | default: () => ({}) | |
| 31 | } | |
| 32 | }) | |
| 33 | ||
| 34 | const command = (item: contextMenuSchema) => { | |
| 35 | item.command && item.command(item) | |
| 36 | } | |
| 37 | ||
| 38 | const visibleChange = (visible: boolean) => { | |
| 39 | emit('visibleChange', visible, props.tagItem) | |
| 40 | } | |
| 41 | ||
| 42 | const elDropdownMenuRef = ref<ComponentRef<typeof ElDropdown>>() | |
| 43 | ||
| 44 | defineExpose({ | |
| 45 | elDropdownMenuRef, | |
| 46 | tagItem: props.tagItem | |
| 47 | }) | |
| 48 | </script> | |
| 49 | ||
| 50 | <template> | |
| 51 | <ElDropdown | |
| 52 | ref="elDropdownMenuRef" | |
| 53 | :class="prefixCls" | |
| 54 | :trigger="trigger" | |
| 55 | placement="bottom-start" | |
| 56 | popper-class="v-context-menu-popper" | |
| 57 | @command="command" | |
| 58 | @visible-change="visibleChange" | |
| 59 | > | |
| 60 | <slot></slot> | |
| 61 | <template #dropdown> | |
| 62 | <ElDropdownMenu> | |
| 63 | <ElDropdownItem | |
| 64 | v-for="(item, index) in schema" | |
| 65 | :key="`dropdown${index}`" | |
| 66 | :command="item" | |
| 67 | :disabled="item.disabled" | |
| 68 | :divided="item.divided" | |
| 69 | > | |
| 70 | <Icon :icon="item.icon" /> | |
| 71 | {{ t(item.label) }} | |
| 72 | </ElDropdownItem> | |
| 73 | </ElDropdownMenu> | |
| 74 | </template> | |
| 75 | </ElDropdown> | |
| 76 | </template> | |
