You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

66 lines
2.3 KiB
Plaintext

<template>
<Dropdown :trigger="['contextmenu']" placement="bottom" overlayClassName="multiple-tabs__dropdown">
<div style="font-size: 14px !important;margin-left: 10px; margin-right: 10px" @contextmenu="handleContext">
<span class="ml-1">{{ getTitle }}</span>
</div>
<template #overlay>
<Menu>
<template v-for = "dropMenu in getDropMenuList" :key="dropMenu.event">
<MenuItem :disabled="dropMenu.disabled" @click="handleClickMenu(dropMenu)">
<span>{{ dropMenu.text }}</span>
</MenuItem>
</template>
</Menu>
</template>
</Dropdown>
</template>
<script lang="ts">
import type { PropType } from 'vue';
import type { RouteLocationNormalized } from 'vue-router';
import {Dropdown, Menu, MenuItem} from 'ant-design-vue';
import { defineComponent, computed, unref } from 'vue';
import { useTabDropdown } from '@/hooks/web/useTabDropdown';
import type { DropMenu, TabContentProps } from '@/types/types';
import { Item } from 'ant-design-vue/lib/menu';
export default defineComponent({
name: 'TabContent',
components:{Dropdown, MenuItem, Menu},
props: {
tabItem: {
type: Object as PropType<RouteLocationNormalized>,
default: null,
},
isExtra: Boolean,
},
setup(props) {
const { getDropMenuList, handleMenuEvent, handleContextMenu } = useTabDropdown(props as TabContentProps);
const handleMenuClick = () => {};
const getTitle = computed(() => {
const { tabItem: { meta } = {} } = props;
return meta && meta.title as string;
});
function handleClickMenu(item: DropMenu) {
const { event } = item;
// const menu = getDropMenuList.find((item) => `${item.event}` === `${event}`);
// emit('menuEvent', menu);
handleMenuEvent(item);
item.onClick?.();
}
function handleContext(e) {
props.tabItem && handleContextMenu(props.tabItem)(e);
}
return {
handleMenuClick,
handleMenuEvent,
getTitle,
getDropMenuList,
handleClickMenu,
handleContext,
};
},
});
</script>