| 提交 | 用户 | age | ||
| 2f6253 | 1 | import type { PropType } from 'vue'; |
| 陈 | 2 | import { Dropdown } from '/@/components/Dropdown/index'; |
| c303ec | 3 | |
| V | 4 | import { defineComponent, unref, FunctionalComponent } from 'vue'; |
| 5 | ||
| 6 | import { TabContentProps } from './types'; | |
| 7 | ||
| a1ffb6 | 8 | import { RightOutlined } from '@ant-design/icons-vue'; |
| 2f6253 | 9 | |
| c303ec | 10 | import { TabContentEnum } from './types'; |
| V | 11 | |
| 2f6253 | 12 | import { useTabDropdown } from './useTabDropdown'; |
| e5f8ce | 13 | import { useI18n } from '/@/hooks/web/useI18n'; |
| c303ec | 14 | |
| V | 15 | import { RouteLocationNormalized } from 'vue-router'; |
| cedba3 | 16 | |
| 190112 | 17 | const { t: titleT } = useI18n(); |
| V | 18 | |
| cedba3 | 19 | const ExtraContent: FunctionalComponent = () => { |
| V | 20 | return ( |
| 21 | <span class={`multiple-tabs-content__extra `}> | |
| 22 | <RightOutlined /> | |
| 23 | </span> | |
| 24 | ); | |
| 25 | }; | |
| 26 | ||
| c303ec | 27 | const TabContent: FunctionalComponent<{ tabItem: RouteLocationNormalized; handler: Fn }> = ( |
| V | 28 | props |
| 29 | ) => { | |
| cedba3 | 30 | const { tabItem: { meta } = {} } = props; |
| V | 31 | |
| 32 | return ( | |
| c303ec | 33 | <div class={`multiple-tabs-content__content `} onContextmenu={props.handler(props.tabItem)}> |
| 190112 | 34 | <span class="ml-1">{meta && titleT(meta.title)}</span> |
| cedba3 | 35 | </div> |
| V | 36 | ); |
| 37 | }; | |
| 2f6253 | 38 | |
| 陈 | 39 | export default defineComponent({ |
| 40 | name: 'TabContent', | |
| 41 | props: { | |
| 42 | tabItem: { | |
| c303ec | 43 | type: Object as PropType<RouteLocationNormalized>, |
| 2f6253 | 44 | default: null, |
| 陈 | 45 | }, |
| cedba3 | 46 | |
| 2f6253 | 47 | type: { |
| cedba3 | 48 | type: Number as PropType<TabContentEnum>, |
| 2f6253 | 49 | default: TabContentEnum.TAB_TYPE, |
| 陈 | 50 | }, |
| 51 | }, | |
| 52 | setup(props) { | |
| c303ec | 53 | const { |
| V | 54 | getDropMenuList, |
| 55 | handleMenuEvent, | |
| 56 | handleContextMenu, | |
| 57 | getTrigger, | |
| 58 | isTabs, | |
| 59 | } = useTabDropdown(props as TabContentProps); | |
| 2f6253 | 60 | |
| 陈 | 61 | return () => { |
| 62 | return ( | |
| 63 | <Dropdown | |
| c303ec | 64 | dropMenuList={unref(getDropMenuList)} |
| V | 65 | trigger={unref(getTrigger)} |
| 2f6253 | 66 | onMenuEvent={handleMenuEvent} |
| 陈 | 67 | > |
| c303ec | 68 | {() => { |
| V | 69 | if (!unref(isTabs)) { |
| 70 | return <ExtraContent />; | |
| 71 | } | |
| 72 | return <TabContent handler={handleContextMenu} tabItem={props.tabItem} />; | |
| 73 | }} | |
| 2f6253 | 74 | </Dropdown> |
| 陈 | 75 | ); |
| 76 | }; | |
| 77 | }, | |
| 78 | }); | |
