From d1465c2a11473dc5fc96d1d863d7c2fc43c8e697 Mon Sep 17 00:00:00 2001
From: neverland <chenjiahan@youzan.com>
Date: Mon, 17 Jan 2022 10:41:43 +0800
Subject: [PATCH] feat(Cascader): add show-header prop (#10202)

---
 packages/vant/src/cascader/Cascader.tsx       | 30 ++++++++++---------
 packages/vant/src/cascader/README.md          |  1 +
 packages/vant/src/cascader/README.zh-CN.md    |  1 +
 packages/vant/src/cascader/test/index.spec.ts | 12 ++++++++
 4 files changed, 30 insertions(+), 14 deletions(-)

diff --git a/packages/vant/src/cascader/Cascader.tsx b/packages/vant/src/cascader/Cascader.tsx
index a05972831..b5949dc72 100644
--- a/packages/vant/src/cascader/Cascader.tsx
+++ b/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,
diff --git a/packages/vant/src/cascader/README.md b/packages/vant/src/cascader/README.md
index ea1e5c969..d08548cc3 100644
--- a/packages/vant/src/cascader/README.md
+++ b/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' }` |
 
diff --git a/packages/vant/src/cascader/README.zh-CN.md b/packages/vant/src/cascader/README.zh-CN.md
index 1f2ffed41..79a5f1c94 100644
--- a/packages/vant/src/cascader/README.zh-CN.md
+++ b/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' }` |
 
diff --git a/packages/vant/src/cascader/test/index.spec.ts b/packages/vant/src/cascader/test/index.spec.ts
index b6335db5e..e7723cf14 100644
--- a/packages/vant/src/cascader/test/index.spec.ts
+++ b/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();
+});