93 lines
2.3 KiB
Vue
93 lines
2.3 KiB
Vue
<template>
|
|
<el-dropdown
|
|
v-if="hasVisibleItems"
|
|
trigger="click"
|
|
@command="handleCommand"
|
|
:style="dropdownStyle"
|
|
>
|
|
<el-button
|
|
:type="buttonType"
|
|
link
|
|
:style="buttonStyle"
|
|
>
|
|
<slot name="button">
|
|
{{ buttonText }}
|
|
<el-icon v-if="buttonIcon" class="el-icon--right" :style="iconStyle">
|
|
<component :is="buttonIcon" v-if="buttonIcon" />
|
|
</el-icon>
|
|
</slot>
|
|
</el-button>
|
|
<template #dropdown>
|
|
<el-dropdown-menu>
|
|
<el-dropdown-item
|
|
v-for="item in visibleItems"
|
|
:key="item.command"
|
|
:command="item.command"
|
|
>
|
|
<el-icon v-if="item.icon">
|
|
<component :is="item.icon" />
|
|
</el-icon>
|
|
<span :style="item.icon ? { marginLeft: '8px' } : {}">{{ item.label }}</span>
|
|
</el-dropdown-item>
|
|
</el-dropdown-menu>
|
|
</template>
|
|
</el-dropdown>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { computed } from 'vue'
|
|
import { Operation } from '@element-plus/icons-vue'
|
|
|
|
interface MenuItem {
|
|
command: string
|
|
label: string
|
|
icon?: any
|
|
visible?: boolean | (() => boolean)
|
|
}
|
|
|
|
interface Props {
|
|
items: MenuItem[]
|
|
buttonText?: string
|
|
buttonIcon?: any
|
|
buttonType?: 'primary' | 'success' | 'warning' | 'danger' | 'info' | 'text'
|
|
buttonStyle?: string | Record<string, any>
|
|
dropdownStyle?: string | Record<string, any>
|
|
iconStyle?: string | Record<string, any>
|
|
}
|
|
|
|
const props = withDefaults(defineProps<Props>(), {
|
|
buttonText: '更多',
|
|
buttonIcon: Operation,
|
|
buttonType: 'primary',
|
|
buttonStyle: () => ({ whiteSpace: 'nowrap' }),
|
|
dropdownStyle: () => ({ marginLeft: '12px' }),
|
|
iconStyle: () => ({ marginLeft: '4px' })
|
|
})
|
|
|
|
const emit = defineEmits<{
|
|
command: [command: string]
|
|
}>()
|
|
|
|
// 计算可见的菜单项
|
|
const visibleItems = computed(() => {
|
|
return props.items.filter(item => {
|
|
if (item.visible === undefined) return true
|
|
if (typeof item.visible === 'boolean') return item.visible
|
|
if (typeof item.visible === 'function') return item.visible()
|
|
return false
|
|
})
|
|
})
|
|
|
|
// 是否有可见的菜单项
|
|
const hasVisibleItems = computed(() => {
|
|
return visibleItems.value.length > 0
|
|
})
|
|
|
|
// 处理命令
|
|
const handleCommand = (command: string) => {
|
|
emit('command', command)
|
|
}
|
|
</script>
|
|
|
|
|