71 lines
1.7 KiB
Vue
71 lines
1.7 KiB
Vue
<template>
|
||
<d-dropdown :visible="visible" :position="position" :align="align" @toggle="handleToggle">
|
||
<slot name="trigger">
|
||
<d-button class="btn-more" variant="text">
|
||
<d-tooltip content="更多" position="top">
|
||
<Icon name="gt-more-operate" :operable="true" />
|
||
</d-tooltip>
|
||
</d-button>
|
||
</slot>
|
||
<template #menu>
|
||
<ul class="list-menu px-4">
|
||
<template v-for="(opt, index) in moreOpts" :key="index">
|
||
<OptionLink
|
||
v-if="opt.type !== 'exit' || item.my_role?.access_level < 50"
|
||
v-bind="item"
|
||
class="list-menu-item"
|
||
@click.prevent="opt.handle(item)"
|
||
>
|
||
<img v-if="opt.svg" :src="opt.svg" />
|
||
<Icon v-else-if="opt.icon" class="icon" :style="{ color: opt.iconColor }" :name="opt.icon" :size="14" />
|
||
<span>{{ opt.text }}</span>
|
||
</OptionLink>
|
||
</template>
|
||
</ul>
|
||
</template>
|
||
</d-dropdown>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
import { ref } from 'vue';
|
||
|
||
interface IData {
|
||
[propName: string]: any; // 数据 key 展示字段名 ： value 数据
|
||
}
|
||
const props = withDefaults(
|
||
defineProps<{
|
||
moreOpts?: IData[];
|
||
position?: string[];
|
||
align?: string;
|
||
item?: any;
|
||
}>(),
|
||
{
|
||
moreOpts: () => [],
|
||
position: () => ['bottom-end', 'top-end'],
|
||
align: 'start',
|
||
item: {}
|
||
}
|
||
);
|
||
|
||
const visible = ref(false);
|
||
const handleToggle = (isVisible?: boolean) => {
|
||
visible.value = isVisible;
|
||
};
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.btn-more {
|
||
border: none;
|
||
background-color: #fff;
|
||
|
||
.icon {
|
||
transform: rotate(90deg);
|
||
}
|
||
}
|
||
.list-menu {
|
||
padding: 8px;
|
||
border-radius: var(--border-radius);
|
||
border: 1px solid var(--color-border);
|
||
}
|
||
</style>
|