diff --git a/packages/vant/src/nav-bar/NavBar.tsx b/packages/vant/src/nav-bar/NavBar.tsx index 09fe11efa..c88208df1 100644 --- a/packages/vant/src/nav-bar/NavBar.tsx +++ b/packages/vant/src/nav-bar/NavBar.tsx @@ -33,6 +33,7 @@ export const navBarProps = { leftArrow: Boolean, placeholder: Boolean, safeAreaInsetTop: Boolean, + clickable: truthProp, }; export type NavBarProps = ExtractPropTypes<typeof navBarProps>; @@ -92,7 +93,7 @@ export default defineComponent({ <div class={bem('content')}> {hasLeft && ( <div - class={[bem('left'), HAPTICS_FEEDBACK]} + class={[bem('left'), props.clickable ? HAPTICS_FEEDBACK : '']} onClick={onClickLeft} > {renderLeft()} @@ -103,7 +104,7 @@ export default defineComponent({ </div> {hasRight && ( <div - class={[bem('right'), HAPTICS_FEEDBACK]} + class={[bem('right'), props.clickable ? HAPTICS_FEEDBACK : '']} onClick={onClickRight} > {renderRight()} diff --git a/packages/vant/src/nav-bar/README.md b/packages/vant/src/nav-bar/README.md index 467dc4b0b..d0efa3989 100644 --- a/packages/vant/src/nav-bar/README.md +++ b/packages/vant/src/nav-bar/README.md @@ -99,6 +99,7 @@ export default { | placeholder | Whether to generate a placeholder element when fixed | _boolean_ | `false` | | z-index | Z-index | _number \| string_ | `1` | | safe-area-inset-top | Whether to enable top safe area adaptation | _boolean_ | `false` | +| clickable | Whether to add `van-haptics-feedback` class name to parent element when render `Slots` | _boolean_ | `true` | ### Slots diff --git a/packages/vant/src/nav-bar/README.zh-CN.md b/packages/vant/src/nav-bar/README.zh-CN.md index 296505aa0..9b1a72a85 100644 --- a/packages/vant/src/nav-bar/README.zh-CN.md +++ b/packages/vant/src/nav-bar/README.zh-CN.md @@ -97,7 +97,7 @@ export default { ### Props | 参数 | 说明 | 类型 | 默认值 | -| --- | --- | --- | --- | +| --- | --- | --- | --- | --- | | title | 标题 | _string_ | `''` | | left-text | 左侧文案 | _string_ | `''` | | right-text | 右侧文案 | _string_ | `''` | @@ -107,6 +107,7 @@ export default { | placeholder | 固定在顶部时,是否在标签位置生成一个等高的占位元素 | _boolean_ | `false` | | z-index | 导航栏 z-index | _number \| string_ | `1` | | safe-area-inset-top | 是否开启[顶部安全区适配](#/zh-CN/advanced-usage#di-bu-an-quan-qu-gua-pei) | _boolean_ | `false` | +| clickable | 渲染 `Slots` 是否在父元素添加 `van-haptics-feedback` 类名 | _boolean_ | `true` | | ### Slots diff --git a/packages/vant/src/nav-bar/test/__snapshots__/index.spec.ts.snap b/packages/vant/src/nav-bar/test/__snapshots__/index.spec.ts.snap index 09d8a7d95..a8b637a18 100644 --- a/packages/vant/src/nav-bar/test/__snapshots__/index.spec.ts.snap +++ b/packages/vant/src/nav-bar/test/__snapshots__/index.spec.ts.snap @@ -25,6 +25,18 @@ exports[`should render placeholder element when using placeholder prop 1`] = ` </div> `; +exports[`should render slots correctly when set clickable to false 1`] = ` +<div class="van-nav-bar__left"> + Custom Left +</div> +`; + +exports[`should render slots correctly when set clickable to false 2`] = ` +<div class="van-nav-bar__right"> + Custom Right +</div> +`; + exports[`should render title slot correctly 1`] = ` <div class="van-nav-bar__title van-ellipsis"> Custom Title diff --git a/packages/vant/src/nav-bar/test/index.spec.ts b/packages/vant/src/nav-bar/test/index.spec.ts index 094379bd0..0088f4708 100644 --- a/packages/vant/src/nav-bar/test/index.spec.ts +++ b/packages/vant/src/nav-bar/test/index.spec.ts @@ -1,4 +1,5 @@ import { NavBar } from '..'; +import { HAPTICS_FEEDBACK } from '../../utils'; import { mount, mockGetBoundingClientRect, later } from '../../../test'; test('should render left slot correctly', () => { @@ -9,6 +10,9 @@ test('should render left slot correctly', () => { }); expect(wrapper.find('.van-nav-bar__left').html()).toMatchSnapshot(); + expect( + wrapper.find('.van-nav-bar__left').classes(HAPTICS_FEEDBACK) + ).toBeTruthy(); }); test('should render left slot correctly', () => { @@ -19,6 +23,9 @@ test('should render left slot correctly', () => { }); expect(wrapper.find('.van-nav-bar__right').html()).toMatchSnapshot(); + expect( + wrapper.find('.van-nav-bar__right').classes(HAPTICS_FEEDBACK) + ).toBeTruthy(); }); test('should render title slot correctly', () => { @@ -85,3 +92,22 @@ test('should change z-index when using z-index prop', () => { }); expect(wrapper.style.zIndex).toEqual('100'); }); + +test('should render slots correctly when set clickable to false', () => { + const wrapper = mount(NavBar, { + slots: { + left: () => 'Custom Left', + right: () => 'Custom Right', + }, + props: { + clickable: false, + }, + }); + + const leftDom = wrapper.find('.van-nav-bar__left'); + const rightDom = wrapper.find('.van-nav-bar__right'); + expect(leftDom.html()).toMatchSnapshot(); + expect(rightDom.html()).toMatchSnapshot(); + expect(leftDom.classes(HAPTICS_FEEDBACK)).toBeFalsy(); + expect(rightDom.classes(HAPTICS_FEEDBACK)).toBeFalsy(); +});