feat: ✨ Tabs 新增 autoLineWidth 设置底部条宽度自动同步文本内容' (#679)

Author: zybzzc

docs/component/tabs.md

@@ -57,6 +57,25 @@ const tab = ref('例子')
 }
 ```
 
+## 自动调整底部条宽度
+
+设置 `auto-line-width` 属性，自动调整底部条宽度为文本内容宽度。
+
+```html
+<wd-tabs v-model="tab" @change="handleChange" auto-line-width>
+  <block v-for="item in tabs" :key="item">
+    <wd-tab :title="`${item}`" :name="item">
+      <view class="content">内容{{ tab }}</view>
+    </wd-tab>
+  </block>
+</wd-tabs>
+```
+
+```typescript
+const tabs = ref(['Wot', 'Design', 'Uni'])
+const tab = ref('Design')
+```
+
 ## 粘性布局
 
 设置 `sticky` 属性，使用粘性布局。可以设置 `offset-top` 属性，当距离窗口顶部多少像素时，固定标签头。在`H5`端使用自定义导航栏时需要参考[sticky 的吸顶距离](/component/sticky.html#吸顶距离)进行配置。
@@ -156,6 +175,7 @@ const tab = ref('例子')
 | sticky        | 粘性布局                         | boolean         | -      | false  | -        |
 | offset-top    | 粘性布局时距离窗口顶部距离       | number          | -      | 0      | -        |
 | swipeable     | 开启手势滑动                     | boolean         | -      | false  | -        |
+| autoLineWidth | 自动调整底部条宽度               | boolean         | -      | false  | -        |
 | lineWidth     | 底部条宽度，单位像素             | number          | -      | 19     | -        |
 | lineHeight    | 底部条高度，单位像素             | number          | -      | 3      | -        |
 | color         | 文字颜色                         | string          | -      | -      | -        |

src/pages/tabs/Index.vue

@@ -23,6 +23,16 @@
       </wd-tabs>
     </demo-block>
 
+    <demo-block title="自动调整底部条宽度" transparent>
+      <wd-tabs v-model="autoLineWidthTab" @change="handleChange" auto-line-width>
+        <block v-for="item in autoLineWidthTabs" :key="item">
+          <wd-tab :title="`${item}`" :name="item">
+            <view class="content">内容{{ autoLineWidthTab }}</view>
+          </wd-tab>
+        </block>
+      </wd-tabs>
+    </demo-block>
+
     <demo-block title="粘性布局" transparent>
       <wd-tabs v-model="tab2" sticky @change="handleChange">
         <block v-for="item in 4" :key="item">
@@ -110,6 +120,9 @@ import { ref } from 'vue'
 const tabs = ref(['这', '是', '一', '个', '例子'])
 const tab = ref('一')
 
+const autoLineWidthTabs = ref(['Wot', 'Design', 'Uni'])
+const autoLineWidthTab = ref('Design')
+
 const tab1 = ref<number>(0)
 const tab2 = ref<number>(0)
 const tab3 = ref<number>(1)

src/uni_modules/wot-design-uni/components/wd-tabs/types.ts

@@ -43,6 +43,10 @@ export const tabsProps = {
    * 开启手势滑动
    */
   swipeable: makeBooleanProp(false),
+  /**
+   * 自动调整底部条宽度，设置了 lineWidth 后无效
+   */
+  autoLineWidth: makeBooleanProp(false),
   /**
    * 底部条宽度，单位像素
    */

src/uni_modules/wot-design-uni/components/wd-tabs/wd-tabs.vue

@@ -19,7 +19,7 @@
                     :class="`wd-tabs__nav-item  ${state.activeIndex === index ? 'is-active' : ''} ${item.disabled ? 'is-disabled' : ''}`"
                     :style="state.activeIndex === index ? (color ? 'color:' + color : '') : inactiveColor ? 'color:' + inactiveColor : ''"
                   >
-                    {{ item.title }}
+                    <text class="wd-tabs__nav-item-text">{{ item.title }}</text>
                     <view class="wd-tabs__line wd-tabs__line--inner" v-if="state.activeIndex === index && state.useInnerLine"></view>
                   </view>
                   <!--下划线-->
@@ -91,7 +91,7 @@
                 :class="`wd-tabs__nav-item ${state.activeIndex === index ? 'is-active' : ''} ${item.disabled ? 'is-disabled' : ''}`"
                 :style="state.activeIndex === index ? (color ? 'color:' + color : '') : inactiveColor ? 'color:' + inactiveColor : ''"
               >
-                {{ item.title }}
+                <text class="wd-tabs__nav-item-text">{{ item.title }}</text>
                 <view class="wd-tabs__line wd-tabs__line--inner" v-if="state.activeIndex === index && state.useInnerLine"></view>
               </view>
               <!--下划线-->
@@ -153,6 +153,7 @@ import { useChildren } from '../composables/useChildren'
 import { useTranslate } from '../composables/useTranslate'
 
 const $item = '.wd-tabs__nav-item'
+const $itemText = '.wd-tabs__nav-item-text'
 const $container = '.wd-tabs__nav-container'
 
 const props = defineProps(tabsProps)
@@ -319,14 +320,20 @@ function toggleMap() {
  * 更新 underline的偏移量
  * @param animation 是否开启动画
  */
-function updateLineStyle(animation: boolean = true) {
+async function updateLineStyle(animation: boolean = true) {
   if (!state.inited) return
-  const { lineWidth, lineHeight } = props
-
-  getRect($item, true, proxy).then((rects) => {
+  const { autoLineWidth, lineWidth, lineHeight } = props
+  try {
+    const rects = await getRect($item, true, proxy)
     const lineStyle: CSSProperties = {}
     if (isDef(lineWidth)) {
       lineStyle.width = addUnit(lineWidth)
+    } else {
+      if (autoLineWidth) {
+        const textRects = await getRect($itemText, true, proxy)
+        const textWidth = Number(textRects[state.activeIndex].width)
+        lineStyle.width = addUnit(textWidth)
+      }
     }
     if (isDef(lineHeight)) {
       lineStyle.height = addUnit(lineHeight)
@@ -342,7 +349,9 @@ function updateLineStyle(animation: boolean = true) {
       state.useInnerLine = false
       state.lineStyle = objToStyle(lineStyle)
     }
-  })
+  } catch (error) {
+    console.error('[wot design] error(wd-tabs): update line style failed', error)
+  }
 }
 /**
  * @description 通过控制tab的active来展示选定的tab