From cb7cbf33250e3711d631271b1bbcb5f6829e75fa Mon Sep 17 00:00:00 2001 From: caoxm Date: Mon, 18 Nov 2024 22:13:08 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E2=9C=A8=20Tabs=20=E6=96=B0=E5=A2=9E?= =?UTF-8?q?=20`autoLineWidth`=20=E8=AE=BE=E7=BD=AE=E5=BA=95=E9=83=A8?= =?UTF-8?q?=E6=9D=A1=E5=AE=BD=E5=BA=A6=E8=87=AA=E5=8A=A8=E5=90=8C=E6=AD=A5?= =?UTF-8?q?=E6=96=87=E6=9C=AC=E5=86=85=E5=AE=B9'=20(#679)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- docs/component/tabs.md | 20 ++++++++++++++++ src/pages/tabs/Index.vue | 13 +++++++++++ .../components/wd-tabs/types.ts | 4 ++++ .../components/wd-tabs/wd-tabs.vue | 23 +++++++++++++------ 4 files changed, 53 insertions(+), 7 deletions(-) diff --git a/docs/component/tabs.md b/docs/component/tabs.md index d5560d11..641670e3 100644 --- a/docs/component/tabs.md +++ b/docs/component/tabs.md @@ -57,6 +57,25 @@ const tab = ref('例子') } ``` +## 自动调整底部条宽度 + +设置 `auto-line-width` 属性，自动调整底部条宽度为文本内容宽度。 + +```html + + + + 内容{{ tab }} + + + +``` + +```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 | - | - | - | diff --git a/src/pages/tabs/Index.vue b/src/pages/tabs/Index.vue index 3ffa8cc1..44951f62 100644 --- a/src/pages/tabs/Index.vue +++ b/src/pages/tabs/Index.vue @@ -23,6 +23,16 @@ + + + + + 内容{{ autoLineWidthTab }} + + + + + @@ -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(0) const tab2 = ref(0) const tab3 = ref(1) diff --git a/src/uni_modules/wot-design-uni/components/wd-tabs/types.ts b/src/uni_modules/wot-design-uni/components/wd-tabs/types.ts index e0062f8c..0766c600 100644 --- a/src/uni_modules/wot-design-uni/components/wd-tabs/types.ts +++ b/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), /** * 底部条宽度，单位像素 */ diff --git a/src/uni_modules/wot-design-uni/components/wd-tabs/wd-tabs.vue b/src/uni_modules/wot-design-uni/components/wd-tabs/wd-tabs.vue index 285210cd..d6e269d9 100644 --- a/src/uni_modules/wot-design-uni/components/wd-tabs/wd-tabs.vue +++ b/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 }} + {{ item.title }} @@ -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 }} + {{ item.title }} @@ -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