diff --git a/src/tab/README.md b/src/tab/README.md index 938e2fdb6..c9da56caf 100644 --- a/src/tab/README.md +++ b/src/tab/README.md @@ -229,7 +229,7 @@ export default { | type | Can be set to `line` `card` | _string_ | `line` | | color | Tab color | _string_ | `#ee0a24` | | background | Background color | _string_ | `white` | -| duration | Toggle tab's animation time | _number \| string_ | `0.3` | - | +| duration | Toggle tab's animation time | _number \| string_ | `0.3` | | line-width | Width of tab line | _number \| string_ | `40px` | | line-height | Height of tab line | _number \| string_ | `3px` | | animated | Whether to change tabs with animation | _boolean_ | `false` | @@ -240,7 +240,7 @@ export default { | lazy-render | Whether to enable tab content lazy render | _boolean_ | `true` | | scrollspy | Whether to use scrollspy mode | _boolean_ | `false` | | offset-top | Sticky offset top , supports `px` `vw` `vh` `rem` unit, default `px` | _number \| string_ | `0` | -| swipe-threshold | Set swipe tabs threshold | _number \| string_ | `5` | - | +| swipe-threshold | Set swipe tabs threshold | _number \| string_ | `5` | | title-active-color | Title active color | _string_ | - | | title-inactive-color | Title inactive color | _string_ | - | | before-change | Callback function before changing tabs,return `false` to prevent change,support return Promise | _(name: number \| string) => boolean \| Promise\_ | - | @@ -259,6 +259,7 @@ export default { | replace | If true, the navigation will not leave a history record | _boolean_ | `false` | | title-style | Custom title style | _string \| Array \| object_ | - | | title-class | Custom title class name | _string \| Array \| object_ | - | +| show-zero-badge `v3.2.2` | Whether to show badge when the value is zero | _boolean_ | `true` | ### Tabs Events diff --git a/src/tab/README.zh-CN.md b/src/tab/README.zh-CN.md index 01175fa91..dc50cf0b3 100644 --- a/src/tab/README.zh-CN.md +++ b/src/tab/README.zh-CN.md @@ -270,6 +270,7 @@ export default { | replace | 是否在跳转时替换当前页面历史 | _boolean_ | `false` | | title-style | 自定义标题样式 | _string \| Array \| object_ | - | | title-class | 自定义标题类名 | _string \| Array \| object_ | - | +| show-zero-badge `v3.2.2` | 当 badge 为数字 0 时,是否展示徽标 | _boolean_ | `true` | ### Tabs Events diff --git a/src/tab/Tab.tsx b/src/tab/Tab.tsx index 1c580bc08..f8d372ffc 100644 --- a/src/tab/Tab.tsx +++ b/src/tab/Tab.tsx @@ -10,7 +10,7 @@ import { } from 'vue'; // Utils -import { createNamespace, extend, unknownProp } from '../utils'; +import { createNamespace, extend, truthProp, unknownProp } from '../utils'; import { TABS_KEY } from '../tabs/Tabs'; // Composables @@ -34,6 +34,7 @@ export default defineComponent({ disabled: Boolean, titleClass: unknownProp, titleStyle: [String, Object] as PropType, + showZeroBadge: truthProp, }), setup(props, { slots }) { diff --git a/src/tab/test/__snapshots__/index.spec.tsx.snap b/src/tab/test/__snapshots__/index.spec.tsx.snap new file mode 100644 index 000000000..6c5a6c868 --- /dev/null +++ b/src/tab/test/__snapshots__/index.spec.tsx.snap @@ -0,0 +1,50 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`should not render zero badge when show-zero-badge prop is false 1`] = ` +
+
+
+ + +
+
+
+
+
+
+ 1 +
+ +
+
+`; diff --git a/src/tab/test/index.spec.tsx b/src/tab/test/index.spec.tsx index 8e41e95e3..7e3702fe4 100644 --- a/src/tab/test/index.spec.tsx +++ b/src/tab/test/index.spec.tsx @@ -28,3 +28,20 @@ test('should emit click-tab event when tab is clicked', async () => { }) ); }); + +test('should not render zero badge when show-zero-badge prop is false', async () => { + const wrapper = mount({ + render() { + return ( + + 1 + + 2 + + + ); + }, + }); + await later(); + expect(wrapper.html()).toMatchSnapshot(); +}); diff --git a/src/tabs/Tabs.tsx b/src/tabs/Tabs.tsx index 9ec5a3f65..0ea3305bf 100644 --- a/src/tabs/Tabs.tsx +++ b/src/tabs/Tabs.tsx @@ -30,6 +30,7 @@ import { setRootScrollTop, ComponentInstance, BORDER_TOP_BOTTOM, + pick, } from '../utils'; import { scrollLeftTo, scrollTopTo } from './utils'; @@ -374,15 +375,11 @@ export default defineComponent({ children.map((item, index) => ( { onClickTab(item, index, event); }} + {...pick(item, [ + 'dot', + 'badge', + 'title', + 'disabled', + 'showZeroBadge', + ])} /> )); diff --git a/src/tabs/TabsTitle.tsx b/src/tabs/TabsTitle.tsx index 807d8b0d2..631a35a9f 100644 --- a/src/tabs/TabsTitle.tsx +++ b/src/tabs/TabsTitle.tsx @@ -1,5 +1,5 @@ import { computed, CSSProperties, defineComponent } from 'vue'; -import { createNamespace, isDef } from '../utils'; +import { createNamespace, isDef, truthProp } from '../utils'; import { Badge } from '../badge'; const [name, bem] = createNamespace('tab'); @@ -19,19 +19,14 @@ export default defineComponent({ activeColor: String, renderTitle: Function, inactiveColor: String, + showZeroBadge: truthProp, }, setup(props) { const style = computed(() => { const style: CSSProperties = {}; - const { - type, - color, - disabled, - isActive, - activeColor, - inactiveColor, - } = props; + const { type, color, disabled, isActive, activeColor, inactiveColor } = + props; const isCard = type === 'card'; @@ -65,7 +60,11 @@ export default defineComponent({ if (props.dot || (isDef(props.badge) && props.badge !== '')) { return ( - + {Text} );