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>
|