feat(Tabs): add bottomLineMode props (#968)

* feat(Tabs): add bottomLineMode props * fix(Tabs): resolved badgeProps invalid
Tencent · Jul 18, 2023 · 9e6209b · 9e6209b
1 parent d805041
commit 9e6209b
Show file tree

Hide file tree

Showing 6 changed files with 69 additions and 37 deletions.
diff --git a/src/tabs/__test__/__snapshots__/demo.test.jsx.snap b/src/tabs/__test__/__snapshots__/demo.test.jsx.snap
@@ -47,7 +47,14 @@ exports[`Tabs > Tabs badgeVue demo works fine 1`] = `
                     </div>
                     
                   </div>
-                  <!--v-if-->
+                  <div
+                    class="t-badge--basic t-badge--dot t-badge--medium t-badge--circle t-has-count"
+                    style="right: -4px; top: 1px;"
+                  >
+                    <!--v-if-->
+                      
+                    <!--v-if-->
+                  </div>
                   <!---->
                 </div>
                 <!--v-if-->
@@ -72,7 +79,14 @@ exports[`Tabs > Tabs badgeVue demo works fine 1`] = `
                     </div>
                     
                   </div>
-                  <!--v-if-->
+                  <div
+                    class="t-badge--basic t-badge--medium t-badge--circle t-badge--count t-has-count"
+                    style="right: -8px; top: 3px;"
+                  >
+                    <!--v-if-->
+                     8 
+                    <!--v-if-->
+                  </div>
                   <!---->
                 </div>
                 <!--v-if-->
@@ -106,7 +120,6 @@ exports[`Tabs > Tabs badgeVue demo works fine 1`] = `
               
               <div
                 class="t-tabs__track t-tabs__track--top"
-                style=""
               />
             </div>
           </div>
@@ -259,7 +272,6 @@ exports[`Tabs > Tabs contentVue demo works fine 1`] = `
               
               <div
                 class="t-tabs__track t-tabs__track--top"
-                style=""
               />
             </div>
           </div>
@@ -405,7 +417,6 @@ exports[`Tabs > Tabs evenlyVue demo works fine 1`] = `
               
               <div
                 class="t-tabs__track t-tabs__track--top"
-                style=""
               />
             </div>
           </div>
@@ -540,7 +551,6 @@ exports[`Tabs > Tabs evenlyVue demo works fine 1`] = `
               
               <div
                 class="t-tabs__track t-tabs__track--top"
-                style=""
               />
             </div>
           </div>
@@ -710,7 +720,6 @@ exports[`Tabs > Tabs evenlyVue demo works fine 1`] = `
               
               <div
                 class="t-tabs__track t-tabs__track--top"
-                style=""
               />
             </div>
           </div>
@@ -917,7 +926,6 @@ exports[`Tabs > Tabs evenlyVue demo works fine 1`] = `
               
               <div
                 class="t-tabs__track t-tabs__track--top"
-                style=""
               />
             </div>
           </div>
@@ -1131,7 +1139,6 @@ exports[`Tabs > Tabs iconVue demo works fine 1`] = `
               
               <div
                 class="t-tabs__track t-tabs__track--top"
-                style=""
               />
             </div>
           </div>
@@ -1434,7 +1441,6 @@ exports[`Tabs > Tabs isometricVue demo works fine 1`] = `
               
               <div
                 class="t-tabs__track t-tabs__track--top"
-                style=""
               />
             </div>
           </div>
@@ -1571,7 +1577,6 @@ exports[`Tabs > Tabs mobileVue demo works fine 1`] = `
                     
                     <div
                       class="t-tabs__track t-tabs__track--top"
-                      style=""
                     />
                   </div>
                 </div>
@@ -1706,7 +1711,6 @@ exports[`Tabs > Tabs mobileVue demo works fine 1`] = `
                     
                     <div
                       class="t-tabs__track t-tabs__track--top"
-                      style=""
                     />
                   </div>
                 </div>
@@ -1876,7 +1880,6 @@ exports[`Tabs > Tabs mobileVue demo works fine 1`] = `
                     
                     <div
                       class="t-tabs__track t-tabs__track--top"
-                      style=""
                     />
                   </div>
                 </div>
@@ -2083,7 +2086,6 @@ exports[`Tabs > Tabs mobileVue demo works fine 1`] = `
                     
                     <div
                       class="t-tabs__track t-tabs__track--top"
-                      style=""
                     />
                   </div>
                 </div>
@@ -2425,7 +2427,6 @@ exports[`Tabs > Tabs mobileVue demo works fine 1`] = `
                     
                     <div
                       class="t-tabs__track t-tabs__track--top"
-                      style=""
                     />
                   </div>
                 </div>
@@ -2605,7 +2606,6 @@ exports[`Tabs > Tabs mobileVue demo works fine 1`] = `
                     
                     <div
                       class="t-tabs__track t-tabs__track--top"
-                      style=""
                     />
                   </div>
                 </div>
@@ -2716,7 +2716,14 @@ exports[`Tabs > Tabs mobileVue demo works fine 1`] = `
                           </div>
                           
                         </div>
-                        <!--v-if-->
+                        <div
+                          class="t-badge--basic t-badge--dot t-badge--medium t-badge--circle t-has-count"
+                          style="right: -4px; top: 1px;"
+                        >
+                          <!--v-if-->
+                            
+                          <!--v-if-->
+                        </div>
                         <!---->
                       </div>
                       <!--v-if-->
@@ -2741,7 +2748,14 @@ exports[`Tabs > Tabs mobileVue demo works fine 1`] = `
                           </div>
                           
                         </div>
-                        <!--v-if-->
+                        <div
+                          class="t-badge--basic t-badge--medium t-badge--circle t-badge--count t-has-count"
+                          style="right: -8px; top: 3px;"
+                        >
+                          <!--v-if-->
+                           8 
+                          <!--v-if-->
+                        </div>
                         <!---->
                       </div>
                       <!--v-if-->
@@ -2775,7 +2789,6 @@ exports[`Tabs > Tabs mobileVue demo works fine 1`] = `
                     
                     <div
                       class="t-tabs__track t-tabs__track--top"
-                      style=""
                     />
                   </div>
                 </div>
@@ -2945,7 +2958,6 @@ exports[`Tabs > Tabs mobileVue demo works fine 1`] = `
                     
                     <div
                       class="t-tabs__track t-tabs__track--top"
-                      style=""
                     />
                   </div>
                 </div>
@@ -3133,7 +3145,6 @@ exports[`Tabs > Tabs mobileVue demo works fine 1`] = `
                     
                     <div
                       class="t-tabs__track t-tabs__track--top"
-                      style=""
                     />
                   </div>
                 </div>
@@ -3332,7 +3343,6 @@ exports[`Tabs > Tabs mobileVue demo works fine 1`] = `
                     
                     <div
                       class="t-tabs__track t-tabs__track--top"
-                      style=""
                     />
                   </div>
                 </div>
@@ -3514,7 +3524,6 @@ exports[`Tabs > Tabs mobileVue demo works fine 1`] = `
                     
                     <div
                       class="t-tabs__track t-tabs__track--top"
-                      style=""
                     />
                   </div>
                 </div>
@@ -4093,7 +4102,6 @@ exports[`Tabs > Tabs sizeVue demo works fine 1`] = `
               
               <div
                 class="t-tabs__track t-tabs__track--top"
-                style=""
               />
             </div>
           </div>
@@ -4275,7 +4283,6 @@ exports[`Tabs > Tabs sizeVue demo works fine 1`] = `
               
               <div
                 class="t-tabs__track t-tabs__track--top"
-                style=""
               />
             </div>
           </div>
@@ -4440,7 +4447,6 @@ exports[`Tabs > Tabs statusVue demo works fine 1`] = `
               
               <div
                 class="t-tabs__track t-tabs__track--top"
-                style=""
               />
             </div>
           </div>

diff --git a/src/tabs/props.ts b/src/tabs/props.ts
@@ -21,6 +21,15 @@ export default {
     type: Boolean,
     default: true,
   },
+  /** 激活下划线的模式*/
+  bottomLineMode: {
+    type: String as PropType<TdTabsProps['bottomLineMode']>,
+    default: 'fixed' as TdTabsProps['bottomLineMode'],
+    validator(val: TdTabsProps['theme']): boolean {
+      if (!val) return true;
+      return ['fixed', 'auto', 'full'].includes(val);
+    },
+  },
   /** 组件尺寸 */
   size: {
     type: String as PropType<TdTabsProps['size']>,

diff --git a/src/tabs/tabs.en-US.md b/src/tabs/tabs.en-US.md
@@ -8,6 +8,7 @@ name | type | default | description | required
 animation | Object | - | Typescript：`TabAnimation` `type TabAnimation = { duration: number } & Record<string, any>`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/tabs/type.ts) | N
 list | Array | - | Typescript：`Array<TdTabPanelProps>` | N
 showBottomLine | Boolean | true | \- | N
+bottomLineMode | String | fixed | options：fixed/auto/full ｜ N
 size | String | medium | options：medium/large | N
 spaceEvenly | Boolean | true | \- | N
 sticky | Boolean | false | \- | N

diff --git a/src/tabs/tabs.md b/src/tabs/tabs.md
@@ -8,6 +8,7 @@
 animation | Object | - | 动画效果设置。其中 duration 表示动画时长。TS 类型：`TabAnimation` `type TabAnimation = { duration: number } & Record<string, any>`。[详细类型定义](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/tabs/type.ts) | N
 list | Array | - | 选项卡列表。TS 类型：`Array<TdTabPanelProps>` | N
 showBottomLine | Boolean | true | 是否展示底部激活线条 | N
+bottomLineMode | String | fixed | 激活下划线的模式。可选项：fixed/auto/full ｜ N
 size | String | medium | 组件尺寸。可选项：medium/large | N
 spaceEvenly | Boolean | true | 选项卡头部空间是否均分 | N
 sticky | Boolean | false | 是否开启粘性布局 | N
@@ -50,7 +51,7 @@ value | String / Number | - | 选项卡的值，唯一标识。TS 类型：`TabV
 --td-tab-track-color | @brand-color | - 
 --td-tab-track-radius | 4px | - 
 --td-tab-track-thickness | 3px | - 
---td-tab-track-width | 16px | - 
+--td-tab-track-width | 16px | 当前激活 tab 下划线的宽度，仅在 bottomLineMode 为 'fixed' 时有效
 --td-tab-nav-bg-color | @bg-color-container | - 
 --td-tab-item-active-color | @brand-color | - 
 --td-tab-item-color | @font-gray-1 | - 

diff --git a/src/tabs/tabs.vue b/src/tabs/tabs.vue
@@ -16,7 +16,7 @@
               }"
               @click="(e) => tabClick(e, item)"
             >
-              <t-badge v-bind="item.badgeProps">
+              <t-badge v-bind="item['badge-props'] || item.badgeProps">
                 <div
                   :class="{
                     [`${name}__item-inner ${name}__item-inner--${theme}`]: true,
@@ -58,6 +58,7 @@ import {
   readonly,
   Fragment,
   watch,
+  CSSProperties,
 } from 'vue';
 import config from '../config';
 import TabsProps from './props';
@@ -76,7 +77,6 @@ export default defineComponent({
   props: TabsProps,
   emits: ['update:value', 'update:modelValue'],
   setup(props, context) {
-    const placement = ref('top');
     const theme = computed(() => props.theme);
     const spaceEvenly = computed(() => props.spaceEvenly);
     const showBottomLine = computed(() => props.showBottomLine);
@@ -137,21 +137,31 @@ export default defineComponent({
     const navScroll = ref<HTMLElement | null>(null);
     const navWrap = ref<HTMLElement | null>(null);
     const navLine = ref<HTMLElement | null>(null);
-    const lineStyle = ref('');
+    const lineStyle = ref();
     const moveToActiveTab = () => {
       if (navWrap.value && navLine.value && showBottomLine.value) {
         const tab = navWrap.value.querySelector<HTMLElement>(`.${activeClass}`);
         if (!tab) return;
         const line = navLine.value;
-        if (placement.value === 'left') {
-          lineStyle.value = `transform: translateY(${tab.offsetTop}px);${
-            props.animation ? `transition-duration:${props.animation.duration}ms` : ''
-          }`;
+        const tabInner = tab.querySelector<HTMLElement>(`.${prefix}-badge`);
+        const style: CSSProperties = {};
+        if (props.bottomLineMode === 'auto') {
+          style.width = `${Number(tabInner?.offsetWidth)}px`;
+          style.transform = `translateX(${Number(tab?.offsetLeft) + Number(tabInner?.offsetLeft)}px)`;
+        } else if (props.bottomLineMode === 'full') {
+          style.width = `${Number(tab?.offsetWidth)}px`;
+          style.transform = `translateX(${Number(tab?.offsetLeft)}px)`;
         } else {
-          lineStyle.value = `transform: translateX(${
-            Number(tab.offsetLeft) + Number(tab.offsetWidth) / 2 - line.offsetWidth / 2
-          }px);${props.animation ? `transition-duration:${props.animation.duration}ms` : ''}`;
+          style.transform = `translateX(${
+            Number(tab?.offsetLeft) + (Number(tab?.offsetWidth) - Number(line?.offsetWidth)) / 2
+          }px)`;
         }
+
+        if (props.animation) {
+          style.transitionDuration = `${props.animation.duration}ms`;
+        }
+
+        lineStyle.value = style;
       }
     };
 

diff --git a/src/tabs/type.ts b/src/tabs/type.ts
@@ -21,6 +21,11 @@ export interface TdTabsProps {
    * @default true
    */
   showBottomLine?: boolean;
+  /**
+   * 激活下划线的模式
+   * @default fixed
+   */
+  bottomLineMode?: 'fixed' | 'auto' | 'full';
   /**
    * 组件尺寸
    * @default medium