feat(comp:tabs): customTitle supports overflowed paramater (#1682)

IDuxFE · Sep 8, 2023 · 5da8900 · 5da8900
1 parent fb1adb2
commit 5da8900
Show file tree

Hide file tree

Showing 6 changed files with 31 additions and 8 deletions.
diff --git a/packages/components/tabs/demo/Scroll.vue b/packages/components/tabs/demo/Scroll.vue
@@ -8,6 +8,7 @@
     </IxTabs>
     <IxTabs v-model:selectedKey="selectedKey" :dataSource="dataSource" type="segment">
       <template #content="{ key }"> Content of Tab {{ key }} </template>
+      <template #title="{ title, overflowed }"> {{ title }}{{ overflowed ? '(overflowed)' : '' }} </template>
     </IxTabs>
     <IxSpace align="center">
       <IxInputNumber v-model:value="selectedKey" :max="98" :min="0"></IxInputNumber>

diff --git a/packages/components/tabs/docs/Api.zh.md b/packages/components/tabs/docs/Api.zh.md
@@ -33,7 +33,7 @@
 export interface TabsData<K = VKey> extends TabProps {
   key: K
   customContent?: string | ((data: { key: VKey; content?: string; selected?: boolean }) => VNodeChild)
-  customTitle?: string | ((data: { key: VKey; disabled?: boolean; selected?: boolean; title?: string }) => VNodeChild)
+  customTitle?: string | ((data: { key: VKey; disabled?: boolean; selected?: boolean; title?: string; overflowed: boolean }) => VNodeChild)
   [key: string]: any
 }
 ```
@@ -42,7 +42,7 @@ export interface TabsData<K = VKey> extends TabProps {
 
 | 名称 | 说明 | 参数类型 | 备注 |
 | --- | --- | --- | --- |
-| `title` | 标题插槽 | `{ key:VKey, disabled:boolean, selected:boolean, title: string }` | - |
+| `title` | 标题插槽 | `{ key:VKey, disabled:boolean, selected:boolean, title: string, overflowed: boolean }` | `overflowed`代表tab溢出且展示在更多tab的浮层中 |
 | `content` | 内容插槽 | `{key:VKey, content: any, selected: boolean}` | - |
 | `addIcon` | 新增图标 | - | 也可以用于自定义其他操作 |
 

diff --git a/packages/components/tabs/src/contents/MoreSelectPane.tsx b/packages/components/tabs/src/contents/MoreSelectPane.tsx
@@ -7,6 +7,8 @@
 
 import { defineComponent, inject, shallowRef, watch } from 'vue'
 
+import { isString } from 'lodash-es'
+
 import { VKey, useState } from '@idux/cdk/utils'
 import { IxCol, IxRow } from '@idux/components/grid'
 import { IxIcon } from '@idux/components/icon'
@@ -18,7 +20,7 @@ import { moreSelectPaneProps } from '../types'
 
 export default defineComponent({
   props: moreSelectPaneProps,
-  setup(props) {
+  setup(props, { slots }) {
     const { props: tabsProps, mergedPrefixCls, handleTabClose, setSelectedKey } = inject(tabsToken)!
 
     const [searchValue, setSearchValue] = useState('')
@@ -45,11 +47,14 @@ export default defineComponent({
     }
 
     const optionLabelRender = (data: SelectData) => {
-      const { key, label, disabled } = data
+      const { key, label, disabled, customTitle } = data
+      const titleSlot = isString(customTitle) ? slots[customTitle] : customTitle
 
       return (
         <IxRow>
-          <IxCol flex="auto">{label}</IxCol>
+          <IxCol flex="auto">
+            {titleSlot?.({ key, disabled, selected: false, title: label, overflowed: true }) ?? label}
+          </IxCol>
           {tabsProps.closable && (
             <IxCol flex="none">
               <IxIcon

diff --git a/packages/components/tabs/src/contents/TabNav.tsx b/packages/components/tabs/src/contents/TabNav.tsx
@@ -91,9 +91,17 @@ export default defineComponent({
     }
 
     return () => {
+      /* eslint-disable indent */
       const titleNode = slots.title
-        ? slots.title({ key, disabled: props.disabled, selected: props.selected, title: props.title })
+        ? slots.title({
+            key,
+            disabled: props.disabled,
+            selected: props.selected,
+            title: props.title,
+            overflowed: false,
+          })
         : props.title
+      /* eslint-enable indent */
       return (
         <div ref={elementRef} class={classes.value} onClick={handleClick}>
           <span class={`${prefixCls.value}-label`}>{titleNode}</span>

diff --git a/packages/components/tabs/src/contents/TabNavWrapper.tsx b/packages/components/tabs/src/contents/TabNavWrapper.tsx
@@ -78,6 +78,7 @@ export default defineComponent({
             key: data.key,
             label: data.title,
             disabled: data.disabled,
+            customTitle: data.customTitle ?? 'title',
           })
         }
         return acc
@@ -173,7 +174,13 @@ export default defineComponent({
               class={`${prefixCls}-nav-operations-popover`}
               v-slots={{
                 content: () => {
-                  return <MoreSelectPane visible={moreSelectPaneVisible.value} dataSource={moreNavDataSource.value} />
+                  return (
+                    <MoreSelectPane
+                      visible={moreSelectPaneVisible.value}
+                      dataSource={moreNavDataSource.value}
+                      v-slots={slots}
+                    />
+                  )
                 },
               }}
             >

diff --git a/packages/components/tabs/src/types.ts b/packages/components/tabs/src/types.ts
@@ -58,7 +58,9 @@ export type TabComponent = FunctionalComponent<Omit<HTMLAttributes, keyof TabPro
 export interface TabsData<K = VKey> extends TabProps {
   key: K
   customContent?: string | ((data: { key: VKey; content?: string; selected?: boolean }) => VNodeChild)
-  customTitle?: string | ((data: { key: VKey; disabled?: boolean; selected?: boolean; title?: string }) => VNodeChild)
+  customTitle?:
+    | string
+    | ((data: { key: VKey; disabled?: boolean; selected?: boolean; title?: string; overflowed: boolean }) => VNodeChild)
   [key: string]: any
 }