From e575bb4bb1bbb0f7630910b6146d5d491ed825d6 Mon Sep 17 00:00:00 2001 From: chenjiahan Date: Mon, 9 Mar 2020 20:37:37 +0800 Subject: [PATCH] feat(Calendar): add show-title prop (#5779) --- src/calendar/README.md | 1 + src/calendar/README.zh-CN.md | 5 +++-- src/calendar/components/Header.js | 5 +++++ src/calendar/index.js | 5 +++++ src/calendar/test/prop.spec.js | 13 +++++++++++++ 5 files changed, 27 insertions(+), 2 deletions(-) diff --git a/src/calendar/README.md b/src/calendar/README.md index 597c09de9..e1222d6c3 100644 --- a/src/calendar/README.md +++ b/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` | diff --git a/src/calendar/README.zh-CN.md b/src/calendar/README.zh-CN.md index 3a71cbb71..e05d2d430 100644 --- a/src/calendar/README.zh-CN.md +++ b/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 数据结构 diff --git a/src/calendar/components/Header.js b/src/calendar/components/Header.js index 8e0ba74dc..772055f4e 100644 --- a/src/calendar/components/Header.js +++ b/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
{title}
; }, diff --git a/src/calendar/index.js b/src/calendar/index.js index 3991b0a63..5724797d0 100644 --- a/src/calendar/index.js +++ b/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({
this.slots('title'), diff --git a/src/calendar/test/prop.spec.js b/src/calendar/test/prop.spec.js index 0327e42ed..9ac0ffd4f 100644 --- a/src/calendar/test/prop.spec.js +++ b/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(); +});