style: improve layout and styling of action-buttons component

pull/54/head
chenminjie 2024-11-29 02:50:36 +08:00
parent 8197f4dfc3
commit 3938f1bdda
1 changed files with 6 additions and 4 deletions

View File

@ -160,22 +160,24 @@ const handleMenuClick = (e: any) => {
</Button> </Button>
</slot> </slot>
<template #overlay> <template #overlay>
<Menu @click="handleMenuClick"> <Menu class="w-full" @click="handleMenuClick">
<MenuItem v-for="(action, index) in getDropdownList" :key="index"> <MenuItem v-for="(action, index) in getDropdownList" :key="index">
<template v-if="action.popConfirm"> <template v-if="action.popConfirm">
<Popconfirm v-bind="getPopConfirmProps(action.popConfirm)"> <Popconfirm v-bind="getPopConfirmProps(action.popConfirm)">
<template v-if="action.popConfirm.icon" #icon> <template v-if="action.popConfirm.icon" #icon>
<IconifyIcon :icon="action.popConfirm.icon" /> <IconifyIcon :icon="action.popConfirm.icon" />
</template> </template>
<div> <div class="flex items-center">
<IconifyIcon v-if="action.icon" :icon="action.icon" /> <IconifyIcon v-if="action.icon" :icon="action.icon" />
<span class="ml-1">{{ action.text }}</span> <span class="ml-1">{{ action.text }}</span>
</div> </div>
</Popconfirm> </Popconfirm>
</template> </template>
<template v-else> <template v-else>
<IconifyIcon v-if="action.icon" :icon="action.icon" /> <div class="flex items-center">
<span class="ml-1">{{ action.label }}</span> <IconifyIcon v-if="action.icon" :icon="action.icon" />
<span class="ml-1">{{ action.text }}</span>
</div>
</template> </template>
</MenuItem> </MenuItem>
</Menu> </Menu>