feat(Cascader): add show-header prop (#10202)

packages/vant/src/cascader/Cascader.tsx

@@ -33,6 +33,7 @@ const cascaderProps = {
   closeable: truthProp,
   swipeable: truthProp,
   closeIcon: makeStringProp('cross'),
+  showHeader: truthProp,
   modelValue: numericProp,
   fieldNames: Object as PropType<CascaderFieldNames>,
   placeholder: String,
@@ -185,20 +186,21 @@ export default defineComponent({
     const onClickTab = ({ name, title }: TabsClickTabEventParams) =>
       emit('click-tab', name, title);
 
-    const renderHeader = () => (
-      <div class={bem('header')}>
-        <h2 class={bem('title')}>
-          {slots.title ? slots.title() : props.title}
-        </h2>
-        {props.closeable ? (
-          <Icon
-            name={props.closeIcon}
-            class={[bem('close-icon'), HAPTICS_FEEDBACK]}
-            onClick={onClose}
-          />
-        ) : null}
-      </div>
-    );
+    const renderHeader = () =>
+      props.showHeader ? (
+        <div class={bem('header')}>
+          <h2 class={bem('title')}>
+            {slots.title ? slots.title() : props.title}
+          </h2>
+          {props.closeable ? (
+            <Icon
+              name={props.closeIcon}
+              class={[bem('close-icon'), HAPTICS_FEEDBACK]}
+              onClick={onClose}
+            />
+          ) : null}
+        </div>
+      ) : null;
 
     const renderOption = (
       option: CascaderOption,

packages/vant/src/cascader/README.md

@@ -253,6 +253,7 @@ export default {
 | active-color | Active color | _string_ | `#ee0a24` |
 | swipeable `v3.0.11` | Whether to enable gestures to slide left and right | _boolean_ | `false` |
 | closeable | Whether to show close icon | _boolean_ | `true` |
+| show-header `v3.4.2` | Whether to show header | _boolean_ | `true` |
 | close-icon `v3.0.10` | Close icon name | _string_ | `cross` |
 | field-names `v3.0.4` | Custom the fields of options | _object_ | `{ text: 'text', value: 'value', children: 'children' }` |
 

packages/vant/src/cascader/README.zh-CN.md

@@ -263,6 +263,7 @@ export default {
 | active-color | 选中状态的高亮颜色 | _string_ | `#ee0a24` |
 | swipeable `v3.0.11` | 是否开启手势左右滑动切换 | _boolean_ | `false` |
 | closeable | 是否显示关闭图标 | _boolean_ | `true` |
+| show-header `v3.4.2` | 是否展示标题栏 | _boolean_ | `true` |
 | close-icon `v3.0.10` | 关闭图标名称或图片链接，等同于 Icon 组件的 [name 属性](#/zh-CN/icon#props) | _string_ | `cross` |
 | field-names `v3.0.4` | 自定义 `options` 结构中的字段 | _object_ | `{ text: 'text', value: 'value', children: 'children' }` |
 

packages/vant/src/cascader/test/index.spec.ts

@@ -261,3 +261,15 @@ test('should render options-top、options-bottom slots correctly', async () => {
 
   expect(wrapper.find('.van-tab__panel').html()).toMatchSnapshot();
 });
+
+test('should not render header when show-header prop is false', async () => {
+  const wrapper = mount(Cascader, {
+    props: {
+      options,
+      showHeader: false,
+    },
+  });
+
+  const header = wrapper.find('.van-cascader__header');
+  expect(header.exists()).toBeFalsy();
+});