You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
63 lines
1.7 KiB
63 lines
1.7 KiB
<template>
|
|
<component :is="render" />
|
|
</template>
|
|
<script setup lang="jsx">
|
|
import { ElDropdown, ElDropdownMenu, ElDropdownItem } from 'element-plus/es/components/dropdown/index';
|
|
import 'element-plus/es/components/dropdown/style/css';
|
|
const props = defineProps({
|
|
type: {
|
|
type: String,
|
|
default: 'text',
|
|
},
|
|
icon: {
|
|
type: String,
|
|
default: 'ArrowDown',
|
|
},
|
|
splitButton: {
|
|
type: Boolean,
|
|
default: false,
|
|
},
|
|
opts: {
|
|
type: Array,
|
|
required: true,
|
|
},
|
|
});
|
|
const attrs = useAttrs();
|
|
const slots = useSlots();
|
|
const handleCommand = (index) => {
|
|
props.opts[index].onClick?.();
|
|
};
|
|
const dropdownSlots = {
|
|
dropdown: () => (
|
|
<ElDropdownMenu>
|
|
{(props.opts || []).map((item, index) => (
|
|
<ElDropdownItem command={index} disabled={item.disabled} divided={item.divided}>
|
|
{item.label}
|
|
</ElDropdownItem>
|
|
))}
|
|
</ElDropdownMenu>
|
|
),
|
|
default: () => (
|
|
<ElButton type="text">
|
|
{slots.default?.() || '更多'}
|
|
<ElIcon name={props.icon} size="16" />
|
|
</ElButton>
|
|
),
|
|
};
|
|
const render = () => (
|
|
<ElDropdown {...props} {...attrs} onCommand={(command) => handleCommand(command)} v-slots={dropdownSlots} />
|
|
);
|
|
</script>
|
|
|
|
<style lang="less" scoped>
|
|
.el-dropdown {
|
|
:deep(.x-icon) {
|
|
top: 0;
|
|
margin-left: @layout-space-small;
|
|
}
|
|
}
|
|
.el-button + .el-dropdown {
|
|
margin-left: 10px;
|
|
}
|
|
</style>
|