feat(tabs, taro): 开启 title-scroll 时不再需要设置 name (jd-opensource#2789)

yi-boide · Dec 22, 2023 · f6d24e6 · f6d24e6
1 parent 5e68145
commit f6d24e6
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 23 deletions.
diff --git a/src/packages/__VUE/tabs/doc.md b/src/packages/__VUE/tabs/doc.md
@@ -84,8 +84,8 @@ app.use(TabPane);
 
 | 参数 | 说明 | 类型 | 默认值 |
 | --- | --- | --- | --- |
-| title | 标题 | string |  |
-| pane-key | 标签 Key , 匹配的标识符 | string | 默认索引 0,1,2... |
+| title | 标题 | string | - |
+| pane-key | 标签 Key , 匹配的标识符 | string | - |
 | disabled | 是否禁用标签 | boolean | false |
 
 ### TabPane Slots

diff --git a/src/packages/__VUE/tabs/doc.taro.md b/src/packages/__VUE/tabs/doc.taro.md
@@ -69,7 +69,7 @@ app.use(TabPane);
 | title-gutter | 标签间隙 | number \| string | `0` |
 | size | 标签栏字体尺寸大小 可选值 large normal small | string | `normal` |
 | auto-height | 自动高度。设置为 true 时，nut-tabs 和 nut-tabs\_\_content 会随着当前 nut-tab-pane 的高度而发生变化。 | boolean | `false` |
-| name | 在`taro`环境下，必须设置`name`以开启标题栏自动滚动功能。 | string | '' |
+| name `v4.2.5 废弃` | 必须设置 name 才能开启 title-scroll 功能，版本 >=4.2.5 时不再需要。 | string | '' |
 
 ### Tabs Slots
 
@@ -82,8 +82,8 @@ app.use(TabPane);
 
 | 参数 | 说明 | 类型 | 默认值 |
 | --- | --- | --- | --- |
-| title | 标题 | string |  |
-| pane-key | 标签 Key , 匹配的标识符 | string | 默认索引 0,1,2... |
+| title | 标题 | string | - |
+| pane-key | 标签 Key , 匹配的标识符 | string | - |
 | disabled | 是否禁用标签 | boolean | false |
 
 ### TabPane Slots

diff --git a/src/packages/__VUE/tabs/index.taro.vue b/src/packages/__VUE/tabs/index.taro.vue
@@ -1,7 +1,7 @@
 <template>
   <view ref="container" class="nut-tabs" :class="[direction]">
     <nut-scroll-view
-      :id="`nut-tabs__titles_${name}`"
+      :id="`nut-tabs__titles_${refRandomId}`"
       :scroll-x="getScrollX"
       :scroll-y="getScrollY"
       :scroll-with-animation="scrollWithAnimation"
@@ -143,15 +143,12 @@ export default create({
     top: {
       type: Number,
       default: 0
-    },
-    name: {
-      type: String,
-      default: ''
     }
   },
   emits: ['update:modelValue', 'click', 'change'],
 
   setup(props: any, { emit, slots }: any) {
+    const refRandomId = Math.random().toString(36).slice(-8);
     const container = ref(null);
     provide('tabsOpiton', {
       activeKey: computed(() => props.modelValue || '0'),
@@ -231,27 +228,25 @@ export default create({
     const titleRectRef = ref<RectItem[]>([]);
     const canShowLabel = ref(false);
     const scrollIntoView = () => {
-      if (!props.name) return;
-
       raf(() => {
         Promise.all([
-          getRect(`#nut-tabs__titles_${props.name}`),
-          getAllRect(`#nut-tabs__titles_${props.name} .nut-tabs__titles-item`)
+          getRect(`#nut-tabs__titles_${refRandomId}`),
+          getAllRect(`#nut-tabs__titles_${refRandomId} .nut-tabs__titles-item`)
         ]).then(([navRect, titleRects]: any) => {
           navRectRef.value = navRect;
           titleRectRef.value = titleRects;
 
           if (navRectRef.value) {
             if (props.direction === 'vertical') {
-              const titlesTotalHeight = titleRects.reduce((prev: number, curr: RectItem) => prev + curr.height, 0);
-              if (titlesTotalHeight > navRectRef.value.height) {
+              const titlesTotalHeight = titleRects.reduce((prev: number, curr: RectItem) => prev + curr?.height, 0);
+              if (titlesTotalHeight > navRectRef.value?.height) {
                 canShowLabel.value = true;
               } else {
                 canShowLabel.value = false;
               }
             } else {
-              const titlesTotalWidth = titleRects.reduce((prev: number, curr: RectItem) => prev + curr.width, 0);
-              if (titlesTotalWidth > navRectRef.value.width) {
+              const titlesTotalWidth = titleRects.reduce((prev: number, curr: RectItem) => prev + curr?.width, 0);
+              if (titlesTotalWidth > navRectRef.value?.width) {
                 canShowLabel.value = true;
               } else {
                 canShowLabel.value = false;
@@ -266,14 +261,14 @@ export default create({
             const DEFAULT_PADDING = 11;
             const top = titleRects
               .slice(0, currentIndex.value)
-              .reduce((prev: number, curr: RectItem) => prev + curr.height + 0, DEFAULT_PADDING);
-            to = top - (navRectRef.value.height - titleRect.height) / 2;
+              .reduce((prev: number, curr: RectItem) => prev + curr?.height + 0, DEFAULT_PADDING);
+            to = top - (navRectRef.value?.height - titleRect?.height) / 2;
           } else {
             const DEFAULT_PADDING = 31;
             const left = titleRects
               .slice(0, currentIndex.value)
-              .reduce((prev: number, curr: RectItem) => prev + curr.width + 20, DEFAULT_PADDING);
-            to = left - (navRectRef.value.width - titleRect.width) / 2;
+              .reduce((prev: number, curr: RectItem) => prev + curr?.width + 20, DEFAULT_PADDING);
+            to = left - (navRectRef.value?.width - titleRect?.width) / 2;
           }
 
           nextTick(() => {
@@ -399,7 +394,6 @@ export default create({
       }
       return { marginLeft: px, marginRight: px };
     });
-    const refRandomId = Math.random().toString(36).slice(-8);
     return {
       titles,
       tabsContentRef,