|
|
@@ -134,12 +134,16 @@ const handleMenuClick = (e: any) => {
|
|
|
<Icon :icon="action.popConfirm.icon" />
|
|
|
</template>
|
|
|
<Button v-bind="getButtonProps(action)">
|
|
|
- <Icon v-if="action.icon" :icon="action.icon" />
|
|
|
+ <template v-if="action.icon" #icon>
|
|
|
+ <Icon :icon="action.icon" />
|
|
|
+ </template>
|
|
|
{{ action.label }}
|
|
|
</Button>
|
|
|
</Popconfirm>
|
|
|
<Button v-else v-bind="getButtonProps(action)" @click="action.onClick">
|
|
|
- <Icon v-if="action.icon" :icon="action.icon" />
|
|
|
+ <template v-if="action.icon" #icon>
|
|
|
+ <Icon :icon="action.icon" />
|
|
|
+ </template>
|
|
|
{{ action.label }}
|
|
|
</Button>
|
|
|
</template>
|
|
|
@@ -147,31 +151,43 @@ const handleMenuClick = (e: any) => {
|
|
|
|
|
|
<Dropdown v-if="getDropdownList.length > 0" :trigger="['hover']">
|
|
|
<slot name="more">
|
|
|
- <Button size="small" type="text">
|
|
|
- <Icon class="icon-more size-5" icon="ic:twotone-more-horiz" />
|
|
|
+ <Button size="small" type="link">
|
|
|
+ <template #icon>
|
|
|
+ <Icon class="icon-more size-5" icon="ic:twotone-more-horiz" />
|
|
|
+ </template>
|
|
|
</Button>
|
|
|
</slot>
|
|
|
<template #overlay>
|
|
|
<Menu @click="handleMenuClick">
|
|
|
- <MenuItem
|
|
|
- v-for="(action, index) in getDropdownList"
|
|
|
- :key="index"
|
|
|
- :disabled="action.disabled"
|
|
|
- >
|
|
|
+ <MenuItem v-for="(action, index) in getDropdownList" :key="index">
|
|
|
<template v-if="action.popConfirm">
|
|
|
<Popconfirm v-bind="getPopConfirmProps(action.popConfirm)">
|
|
|
<template v-if="action.popConfirm.icon" #icon>
|
|
|
<Icon :icon="action.popConfirm.icon" />
|
|
|
</template>
|
|
|
- <div>
|
|
|
+ <div
|
|
|
+ :class="
|
|
|
+ action.disabled === true
|
|
|
+ ? 'cursor-not-allowed text-gray-300'
|
|
|
+ : ''
|
|
|
+ "
|
|
|
+ >
|
|
|
<Icon v-if="action.icon" :icon="action.icon" />
|
|
|
<span class="ml-1">{{ action.text }}</span>
|
|
|
</div>
|
|
|
</Popconfirm>
|
|
|
</template>
|
|
|
<template v-else>
|
|
|
- <Icon v-if="action.icon" :icon="action.icon" />
|
|
|
- {{ action.label }}
|
|
|
+ <div
|
|
|
+ :class="
|
|
|
+ action.disabled === true
|
|
|
+ ? 'cursor-not-allowed text-gray-300'
|
|
|
+ : ''
|
|
|
+ "
|
|
|
+ >
|
|
|
+ <Icon v-if="action.icon" :icon="action.icon" />
|
|
|
+ {{ action.label }}
|
|
|
+ </div>
|
|
|
</template>
|
|
|
</MenuItem>
|
|
|
</Menu>
|
|
|
@@ -179,3 +195,28 @@ const handleMenuClick = (e: any) => {
|
|
|
</Dropdown>
|
|
|
</div>
|
|
|
</template>
|
|
|
+<style lang="less">
|
|
|
+/** 修复 iconify 位置问题 **/
|
|
|
+.m-table-action {
|
|
|
+ .ant-btn > .iconify + span,
|
|
|
+ .ant-btn > span + .iconify {
|
|
|
+ margin-inline-start: 8px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .ant-btn > .iconify {
|
|
|
+ display: inline-flex;
|
|
|
+ align-items: center;
|
|
|
+ width: 1em;
|
|
|
+ height: 1em;
|
|
|
+ font-style: normal;
|
|
|
+ line-height: 0;
|
|
|
+ color: inherit;
|
|
|
+ text-align: center;
|
|
|
+ text-transform: none;
|
|
|
+ vertical-align: -0.125em;
|
|
|
+ text-rendering: optimizelegibility;
|
|
|
+ -webkit-font-smoothing: antialiased;
|
|
|
+ -moz-osx-font-smoothing: grayscale;
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|