From a8dd1394a84139ec8e874afb0583c433dd2c7bb4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=BC=8A=E5=A2=A8?= <1905672206@qq.com> Date: Thu, 10 Apr 2025 17:00:49 +0800 Subject: [PATCH 1/4] feat(Tab): support remaining badge component property --- packages/vant/src/tab/Tab.tsx | 5 +++- packages/vant/src/tab/TabTitle.tsx | 38 ++++++++++++++++++++++-------- 2 files changed, 32 insertions(+), 11 deletions(-) diff --git a/packages/vant/src/tab/Tab.tsx b/packages/vant/src/tab/Tab.tsx index 2d4bc49f171..feca5d05d03 100644 --- a/packages/vant/src/tab/Tab.tsx +++ b/packages/vant/src/tab/Tab.tsx @@ -32,6 +32,7 @@ import { useId } from '../composables/use-id'; import { useExpose } from '../composables/use-expose'; import { routeProps } from '../composables/use-route'; import { TAB_STATUS_KEY } from '../composables/use-tab-status'; +import type { BadgeProps } from '../badge'; // Components import { TabTitle } from './TabTitle'; @@ -42,7 +43,9 @@ const [name, bem] = createNamespace('tab'); export const tabProps = extend({}, routeProps, { dot: Boolean, name: numericProp, - badge: numericProp, + badge: [...numericProp, Object] as PropType< + Omit | string | number + >, title: String, disabled: Boolean, titleClass: unknownProp, diff --git a/packages/vant/src/tab/TabTitle.tsx b/packages/vant/src/tab/TabTitle.tsx index 273eee217f2..86c3db0c5e9 100644 --- a/packages/vant/src/tab/TabTitle.tsx +++ b/packages/vant/src/tab/TabTitle.tsx @@ -1,6 +1,17 @@ -import { computed, defineComponent, type CSSProperties } from 'vue'; -import { isDef, truthProp, numericProp, createNamespace } from '../utils'; -import { Badge } from '../badge'; +import { + computed, + defineComponent, + type CSSProperties, + type PropType, +} from 'vue'; +import { + isDef, + truthProp, + numericProp, + createNamespace, + isObject, +} from '../utils'; +import { Badge, type BadgeProps } from '../badge'; const [name, bem] = createNamespace('tab'); @@ -13,7 +24,9 @@ export const TabTitle = defineComponent({ type: String, color: String, title: String, - badge: numericProp, + badge: [...numericProp, Object] as PropType< + Omit | string | number + >, shrink: Boolean, isActive: Boolean, disabled: Boolean, @@ -60,13 +73,18 @@ export const TabTitle = defineComponent({ ); - if (props.dot || (isDef(props.badge) && props.badge !== '')) { + if ( + props.dot || + (isObject(props.badge) + ? props.badge.content !== '' + : isDef(props.badge) && props.badge !== '') + ) { + const rest = + typeof props.badge === 'number' || typeof props.badge === 'string' + ? { content: props.badge } + : props.badge; return ( - + {Text} ); From 6e131c3e80f2301526a6ced3001502edcc9fcf87 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=BC=8A=E5=A2=A8?= <1905672206@qq.com> Date: Thu, 10 Apr 2025 18:39:35 +0800 Subject: [PATCH 2/4] fix(Tab): badge component was created when `badge.content` was undefined --- packages/vant/src/tab/TabTitle.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/vant/src/tab/TabTitle.tsx b/packages/vant/src/tab/TabTitle.tsx index 86c3db0c5e9..cae6bbf2c08 100644 --- a/packages/vant/src/tab/TabTitle.tsx +++ b/packages/vant/src/tab/TabTitle.tsx @@ -76,7 +76,7 @@ export const TabTitle = defineComponent({ if ( props.dot || (isObject(props.badge) - ? props.badge.content !== '' + ? isDef(props.badge.content) && props.badge.content !== '' : isDef(props.badge) && props.badge !== '') ) { const rest = From 534a8bc0487fdfc9a169290c6a2036b31d5bf972 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=BC=8A=E5=A2=A8?= <1905672206@qq.com> Date: Sun, 13 Apr 2025 21:06:39 +0800 Subject: [PATCH 3/4] fix(Tab): badge prop type and component instance type are inconsistent --- packages/vant/src/tab/Tab.tsx | 9 +++++++-- packages/vant/src/tab/TabTitle.tsx | 7 ++++++- 2 files changed, 13 insertions(+), 3 deletions(-) diff --git a/packages/vant/src/tab/Tab.tsx b/packages/vant/src/tab/Tab.tsx index feca5d05d03..1508bab943a 100644 --- a/packages/vant/src/tab/Tab.tsx +++ b/packages/vant/src/tab/Tab.tsx @@ -32,7 +32,7 @@ import { useId } from '../composables/use-id'; import { useExpose } from '../composables/use-expose'; import { routeProps } from '../composables/use-route'; import { TAB_STATUS_KEY } from '../composables/use-tab-status'; -import type { BadgeProps } from '../badge'; +import type { Badge, BadgeProps } from '../badge'; // Components import { TabTitle } from './TabTitle'; @@ -44,7 +44,12 @@ export const tabProps = extend({}, routeProps, { dot: Boolean, name: numericProp, badge: [...numericProp, Object] as PropType< - Omit | string | number + | Omit< + Pick['$props'], keyof BadgeProps>, + 'dot' | 'showZero' + > + | string + | number >, title: String, disabled: Boolean, diff --git a/packages/vant/src/tab/TabTitle.tsx b/packages/vant/src/tab/TabTitle.tsx index cae6bbf2c08..ba38707ee70 100644 --- a/packages/vant/src/tab/TabTitle.tsx +++ b/packages/vant/src/tab/TabTitle.tsx @@ -25,7 +25,12 @@ export const TabTitle = defineComponent({ color: String, title: String, badge: [...numericProp, Object] as PropType< - Omit | string | number + | Omit< + Pick['$props'], keyof BadgeProps>, + 'dot' | 'showZero' + > + | string + | number >, shrink: Boolean, isActive: Boolean, From 7259d35be26e0a46b456ba4ff2ac7b0371d8abec Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=BC=8A=E5=A2=A8?= <1905672206@qq.com> Date: Tue, 22 Apr 2025 10:23:44 +0800 Subject: [PATCH 4/4] test(Tab): modify test case "should render badge prop correct" --- .../test/__snapshots__/index.spec.tsx.snap | 20 ------------------- packages/vant/src/tab/test/index.spec.tsx | 9 +++++++-- 2 files changed, 7 insertions(+), 22 deletions(-) diff --git a/packages/vant/src/tab/test/__snapshots__/index.spec.tsx.snap b/packages/vant/src/tab/test/__snapshots__/index.spec.tsx.snap index 81cdb64e473..ac43d50bca8 100644 --- a/packages/vant/src/tab/test/__snapshots__/index.spec.tsx.snap +++ b/packages/vant/src/tab/test/__snapshots__/index.spec.tsx.snap @@ -161,26 +161,6 @@ exports[`should not render empty tab 1`] = ` `; -exports[`should render badge prop correctly 1`] = ` - -`; - exports[`should render nav-left、nav-right slot correctly 1`] = `
{ @@ -169,16 +169,21 @@ test('should render dot prop correctly', async () => { test('should render badge prop correctly', async () => { const wrapper = mount({ render() { + const badge: TabProps['badge'] = { content: '20' }; return ( Text + Text ); }, }); await later(); - expect(wrapper.find('.van-tab').html()).toMatchSnapshot(); + const tabs = wrapper.findAll('.van-badge'); + expect(expect.length).toBe(2); + expect(tabs[0].text()).toBe('10'); + expect(tabs[1].text()).toBe('20'); }); test('should change title style when using title-style prop', async () => {