Skip to content

feat(Tab): support remaining badge component property #13431

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
YiMo1 wants to merge 4 commits into
base: main
Choose a base branch
from
Draft

feat(Tab): support remaining badge component property #13431

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
a8dd139
feat(Tab): support remaining badge component property
YiMo1 Apr 10, 2025
6e131c3
fix(Tab): badge component was created when `badge.content` was undefined
YiMo1 Apr 10, 2025
534a8bc
fix(Tab): badge prop type and component instance type are inconsistent
YiMo1 Apr 13, 2025
7259d35
test(Tab): modify test case "should render badge prop correct"
YiMo1 Apr 22, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 4 additions & 1 deletion packages/vant/src/tab/Tab.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand All @@ -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<BadgeProps, 'dot' | 'showZero'> | string | number
>,
title: String,
disabled: Boolean,
titleClass: unknownProp,
Expand Down
38 changes: 28 additions & 10 deletions packages/vant/src/tab/TabTitle.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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');

Expand All @@ -13,7 +24,9 @@ export const TabTitle = defineComponent({
type: String,
color: String,
title: String,
badge: numericProp,
badge: [...numericProp, Object] as PropType<
Omit<BadgeProps, 'dot' | 'showZero'> | string | number
>,
shrink: Boolean,
isActive: Boolean,
disabled: Boolean,
Expand Down Expand Up @@ -60,13 +73,18 @@ export const TabTitle = defineComponent({
</span>
);

if (props.dot || (isDef(props.badge) && props.badge !== '')) {
if (
props.dot ||
(isObject(props.badge)
? isDef(props.badge.content) && props.badge.content !== ''
: isDef(props.badge) && props.badge !== '')
) {
const rest =
typeof props.badge === 'number' || typeof props.badge === 'string'
? { content: props.badge }
: props.badge;
return (
<Badge
dot={props.dot}
content={props.badge}
showZero={props.showZeroBadge}
>
<Badge dot={props.dot} showZero={props.showZeroBadge} {...rest}>
{Text}
</Badge>
);
Expand Down