feat(Calendar): add show-title prop (#5779)

src/calendar/README.md

@@ -248,6 +248,7 @@ Set `poppable` to `false`, the calendar will be displayed directly on the page i
 | poppable | Whether to show the calendar inside a popup | *boolean* | `true` |
 | round | Whether to show round corner | *boolean* | `true` |
 | show-mark | Whether to show background month mark | *boolean* | `true` |
+| show-title `v2.5.5` | Whether to show title | *boolean* | `true` |
 | show-confirm | Whether to show confirm button | *boolean* | `true` |
 | close-on-popstate `v2.4.4` | Whether to close when popstate | *boolean* | `false` |
 | close-on-click-overlay | Whether to close when click overlay | *boolean* | `true` |

src/calendar/README.zh-CN.md

@@ -243,13 +243,14 @@ export default {
 | color | 主题色，对底部按钮和选中日期生效 | *string* | `#ee0a24` |
 | min-date | 可选择的最小日期 | *Date*  | 当前日期 |
 | max-date | 可选择的最大日期 | *Date*  | 当前日期的六个月后 |
-| default-date | 默认选中的日期，`type`为`multiple`或`range`时须传入数组 | *Date \| Date[]* | 今天 |
+| default-date | 默认选中的日期，`type`为`multiple`或`range`时为数组 | *Date \| Date[]* | 今天 |
 | row-height | 日期行高 | *number \| string* | `64` |
 | formatter | 日期格式化函数 | *(day: Day) => Day* | - |
 | position | 弹出位置，可选值为 `top` `right` `left` | *string* | `bottom` |
 | poppable | 是否以弹层的形式展示日历 | *boolean* | `true` |
 | round | 是否显示圆角弹窗 | *boolean* | `true` |
 | show-mark | 是否显示月份背景水印 | *boolean* | `true` |
+| show-title `v2.5.5` | 是否展示日历标题 | *boolean* | `true` |
 | show-confirm | 是否展示确认按钮 | *boolean* | `true` |
 | close-on-popstate `v2.4.4` | 是否在页面回退时自动关闭 | *boolean* | `false` |
 | close-on-click-overlay | 是否在点击遮罩层后关闭 | *boolean* | `true` |
@@ -257,7 +258,7 @@ export default {
 | confirm-text | 确认按钮的文字 | *string* | `确定` |
 | confirm-disabled-text | 确认按钮处于禁用状态时的文字 | *string* | `确定` |
 | max-range `v2.4.3` | 日期区间最多可选天数，默认无限制 | *number \| string* | - |
-| range-prompt `v2.4.3` | 选择超过区间范围时的提示文案 | *string* | `选择天数不能超过 xx 天` |
+| range-prompt `v2.4.3` | 范围选择超过最多可选天数时的提示文案 | *string* | `选择天数不能超过 xx 天` |
 | get-container `v2.4.4` | 指定挂载的节点，[用法示例](#/zh-CN/popup#zhi-ding-gua-zai-wei-zhi) | *string \| () => Element* | - |
 
 ### Day 数据结构

src/calendar/components/Header.js

@@ -6,11 +6,16 @@ const [createComponent] = createNamespace('calendar-header');
 export default createComponent({
   props: {
     title: String,
+    showTitle: Boolean,
     monthTitle: String,
   },
 
   methods: {
     genTitle() {
+      if (!this.showTitle) {
+        return;
+      }
+
       const title = this.slots('title') || this.title || t('title');
       return <div class={bem('header-title')}>{title}</div>;
     },

src/calendar/index.js

@@ -69,6 +69,10 @@ export default createComponent({
       type: Boolean,
       default: true,
     },
+    showTitle: {
+      type: Boolean,
+      default: true,
+    },
     showConfirm: {
       type: Boolean,
       default: true,
@@ -384,6 +388,7 @@ export default createComponent({
         <div class={bem()}>
           <Header
             title={this.title}
+            showTitle={this.showTitle}
             monthTitle={this.monthTitle}
             scopedSlots={{
               title: () => this.slots('title'),

src/calendar/test/prop.spec.js

@@ -24,3 +24,16 @@ test('max-range prop', async () => {
 
   expect(wrapper.emitted('confirm')).toBeFalsy();
 });
+
+test('show-title prop', async () => {
+  const wrapper = mount(Calendar, {
+    propsData: {
+      value: true,
+    },
+  });
+
+  await later();
+  expect(wrapper.contains('.van-calendar__header-title')).toBeTruthy();
+  wrapper.setProps({ showTitle: false });
+  expect(wrapper.contains('.van-calendar__header-title')).toBeFalsy();
+});