From 7fffc99c39dee57877e103242d20df33b7263039 Mon Sep 17 00:00:00 2001 From: anlyyao Date: Mon, 17 Jul 2023 22:17:21 +0800 Subject: [PATCH 1/2] feat(Tabs): add bottomLineMode props --- .../__test__/__snapshots__/demo.test.jsx.snap | 22 --------------- src/tabs/props.ts | 9 ++++++ src/tabs/tabs.en-US.md | 1 + src/tabs/tabs.md | 3 +- src/tabs/tabs.vue | 28 +++++++++++++------ src/tabs/type.ts | 5 ++++ 6 files changed, 36 insertions(+), 32 deletions(-) diff --git a/src/tabs/__test__/__snapshots__/demo.test.jsx.snap b/src/tabs/__test__/__snapshots__/demo.test.jsx.snap index 9450a62c5..0e4d64e0e 100644 --- a/src/tabs/__test__/__snapshots__/demo.test.jsx.snap +++ b/src/tabs/__test__/__snapshots__/demo.test.jsx.snap @@ -106,7 +106,6 @@ exports[`Tabs > Tabs badgeVue demo works fine 1`] = `
@@ -259,7 +258,6 @@ exports[`Tabs > Tabs contentVue demo works fine 1`] = `
@@ -405,7 +403,6 @@ exports[`Tabs > Tabs evenlyVue demo works fine 1`] = `
@@ -540,7 +537,6 @@ exports[`Tabs > Tabs evenlyVue demo works fine 1`] = `
@@ -710,7 +706,6 @@ exports[`Tabs > Tabs evenlyVue demo works fine 1`] = `
@@ -917,7 +912,6 @@ exports[`Tabs > Tabs evenlyVue demo works fine 1`] = `
@@ -1131,7 +1125,6 @@ exports[`Tabs > Tabs iconVue demo works fine 1`] = `
@@ -1434,7 +1427,6 @@ exports[`Tabs > Tabs isometricVue demo works fine 1`] = `
@@ -1571,7 +1563,6 @@ exports[`Tabs > Tabs mobileVue demo works fine 1`] = `
@@ -1706,7 +1697,6 @@ exports[`Tabs > Tabs mobileVue demo works fine 1`] = `
@@ -1876,7 +1866,6 @@ exports[`Tabs > Tabs mobileVue demo works fine 1`] = `
@@ -2083,7 +2072,6 @@ exports[`Tabs > Tabs mobileVue demo works fine 1`] = `
@@ -2425,7 +2413,6 @@ exports[`Tabs > Tabs mobileVue demo works fine 1`] = `
@@ -2605,7 +2592,6 @@ exports[`Tabs > Tabs mobileVue demo works fine 1`] = `
@@ -2775,7 +2761,6 @@ exports[`Tabs > Tabs mobileVue demo works fine 1`] = `
@@ -2945,7 +2930,6 @@ exports[`Tabs > Tabs mobileVue demo works fine 1`] = `
@@ -3133,7 +3117,6 @@ exports[`Tabs > Tabs mobileVue demo works fine 1`] = `
@@ -3332,7 +3315,6 @@ exports[`Tabs > Tabs mobileVue demo works fine 1`] = `
@@ -3514,7 +3496,6 @@ exports[`Tabs > Tabs mobileVue demo works fine 1`] = `
@@ -4093,7 +4074,6 @@ exports[`Tabs > Tabs sizeVue demo works fine 1`] = `
@@ -4275,7 +4255,6 @@ exports[`Tabs > Tabs sizeVue demo works fine 1`] = `
@@ -4440,7 +4419,6 @@ exports[`Tabs > Tabs statusVue demo works fine 1`] = `
diff --git a/src/tabs/props.ts b/src/tabs/props.ts index 8c2568f92..9b4ce6fb7 100644 --- 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, + 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, diff --git a/src/tabs/tabs.en-US.md b/src/tabs/tabs.en-US.md index 850eb9719..c08702314 100644 --- 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`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/tabs/type.ts) | N list | Array | - | Typescript：`Array` | 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 index 398ab9bf2..b32b0a183 100644 --- a/src/tabs/tabs.md +++ b/src/tabs/tabs.md @@ -8,6 +8,7 @@ animation | Object | - | 动画效果设置。其中 duration 表示动画时长。TS 类型：`TabAnimation` `type TabAnimation = { duration: number } & Record`。[详细类型定义](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/tabs/type.ts) | N list | Array | - | 选项卡列表。TS 类型：`Array` | 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 index dae1d7cc3..6e0b609da 100644 --- a/src/tabs/tabs.vue +++ b/src/tabs/tabs.vue @@ -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(null); const navWrap = ref(null); const navLine = ref(null); - const lineStyle = ref(''); + const lineStyle = ref(); const moveToActiveTab = () => { if (navWrap.value && navLine.value && showBottomLine.value) { const tab = navWrap.value.querySelector(`.${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(`.${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 index a56fe2d5a..2acb4fc6a 100644 --- 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 From 7f5cef5bc65f3700055e8a49973e7f97281ec980 Mon Sep 17 00:00:00 2001 From: anlyyao Date: Tue, 18 Jul 2023 17:15:22 +0800 Subject: [PATCH 2/2] fix(Tabs): resolved badgeProps invalid --- .../__test__/__snapshots__/demo.test.jsx.snap | 36 ++++++++++++++++--- src/tabs/tabs.en-US.md | 2 +- src/tabs/tabs.vue | 2 +- 3 files changed, 34 insertions(+), 6 deletions(-) diff --git a/src/tabs/__test__/__snapshots__/demo.test.jsx.snap b/src/tabs/__test__/__snapshots__/demo.test.jsx.snap index 0e4d64e0e..7e8329892 100644 --- 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`] = ` - +
+ + + +
@@ -72,7 +79,14 @@ exports[`Tabs > Tabs badgeVue demo works fine 1`] = ` - +
+ + 8 + +
@@ -2702,7 +2716,14 @@ exports[`Tabs > Tabs mobileVue demo works fine 1`] = ` - +
+ + + +
@@ -2727,7 +2748,14 @@ exports[`Tabs > Tabs mobileVue demo works fine 1`] = ` - +
+ + 8 + +
diff --git a/src/tabs/tabs.en-US.md b/src/tabs/tabs.en-US.md index c08702314..9f4e28c18 100644 --- a/src/tabs/tabs.en-US.md +++ b/src/tabs/tabs.en-US.md @@ -8,7 +8,7 @@ name | type | default | description | required animation | Object | - | Typescript：`TabAnimation` `type TabAnimation = { duration: number } & Record`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/tabs/type.ts) | N list | Array | - | Typescript：`Array` | N showBottomLine | Boolean | true | \- | N -bottomLineMode | String | fixed'| options：fixed/auto/full ｜ 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.vue b/src/tabs/tabs.vue index 6e0b609da..fcc5caf4e 100644 --- a/src/tabs/tabs.vue +++ b/src/tabs/tabs.vue @@ -16,7 +16,7 @@ }" @click="(e) => tabClick(e, item)" > - +