blackteay/vant
1
0
Fork 0
mirror of https://gitee.com/vant-contrib/vant.git synced 2025-04-06 03:57:59 +08:00
Code Issues Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
chenjiahan 2020-03-09 20:55:20 +08:00
parent e575bb4bb1
commit 17ecc980a7
9 changed files with 64 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/calendar/README.md
View File

@ -249,6 +249,7 @@ Set `poppable` to `false`, the calendar will be displayed directly on the page i
| 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-subtitle `v2.5.5` | Whether to show subtitle | *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` |

1
src/calendar/README.zh-CN.md
View File

@ -251,6 +251,7 @@ export default {
| round | 是否显示圆角弹窗 | *boolean* | `true` |
| show-mark | 是否显示月份背景水印 | *boolean* | `true` |
| show-title `v2.5.5` | 是否展示日历标题 | *boolean* | `true` |
| show-subtitle `v2.5.5` | 是否展示日历副标题（年月） | *boolean* | `true` |
| show-confirm | 是否展示确认按钮 | *boolean* | `true` |
| close-on-popstate `v2.4.4` | 是否在页面回退时自动关闭 | *boolean* | `false` |
| close-on-click-overlay | 是否在点击遮罩层后关闭 | *boolean* | `true` |

19
src/calendar/components/Header.js
View File

@ -6,22 +6,23 @@ const [createComponent] = createNamespace('calendar-header');
export default createComponent({
props: {
title: String,
subtitle: String,
showTitle: Boolean,
monthTitle: String,
showSubtitle: Boolean,
},
methods: {
genTitle() {
if (!this.showTitle) {
return;
if (this.showTitle) {
const title = this.slots('title') || this.title || t('title');
return <div class={bem('header-title')}>{title}</div>;
}
const title = this.slots('title') || this.title || t('title');
return <div class={bem('header-title')}>{title}</div>;
},
genMonth() {
return <div class={bem('month-title')}>{this.monthTitle}</div>;
genSubtitle() {
if (this.showSubtitle) {
return <div class={bem('header-subtitle')}>{this.subtitle}</div>;
}
},
genWeekDays() {
@ -41,7 +42,7 @@ export default createComponent({
return (
<div class={bem('header')}>
{this.genTitle()}
{this.genMonth()}
{this.genSubtitle()}
{this.genWeekDays()}
</div>
);

13
src/calendar/index.js
View File

@ -77,6 +77,10 @@ export default createComponent({
type: Boolean,
default: true,
},
showSubtitle: {
type: Boolean,
default: true,
},
safeAreaInsetBottom: {
type: Boolean,
default: true,
@ -93,7 +97,7 @@ export default createComponent({
data() {
return {
monthTitle: '',
subtitle: '',
currentDate: this.getInitialDate(),
};
},
@ -239,7 +243,7 @@ export default createComponent({
/* istanbul ignore else */
if (currentMonth) {
this.monthTitle = currentMonth.title;
this.subtitle = currentMonth.title;
}
},
@ -389,7 +393,8 @@ export default createComponent({
<Header
title={this.title}
showTitle={this.showTitle}
monthTitle={this.monthTitle}
subtitle={this.subtitle}
showSubtitle={this.showSubtitle}
scopedSlots={{
title: () => this.slots('title'),
}}
@ -410,11 +415,11 @@ export default createComponent({
return (
<Popup
round
closeable
class={bem('popup')}
value={this.value}
round={this.round}
position={this.position}
closeable={this.showTitle || this.showSubtitle}
getContainer={this.getContainer}
closeOnPopstate={this.closeOnPopstate}
closeOnClickOverlay={this.closeOnClickOverlay}

7
src/calendar/index.less
View File

@ -27,8 +27,9 @@
box-shadow: @calendar-header-box-shadow;
}
&__month-title,
&__header-title,
&__month-title {
&__header-subtitle {
height: @calendar-header-title-height;
font-weight: @font-weight-bold;
line-height: @calendar-header-title-height;
@ -39,6 +40,10 @@
font-size: @calendar-header-title-font-size;
}
&__header-subtitle {
font-size: @calendar-header-subtitle-font-size;
}
&__month-title {
font-size: @calendar-month-title-font-size;
}

2
src/calendar/test/__snapshots__/demo.spec.js.snap
View File

@ -56,7 +56,7 @@ exports[`renders demo correctly 1`] = `
<div class="van-calendar" style="height: 500px;">
<div class="van-calendar__header">
<div class="van-calendar__header-title">日历</div>
<div class="van-calendar__month-title">2012年1月</div>
<div class="van-calendar__header-subtitle">2012年1月</div>
<div class="van-calendar__weekdays"><span class="van-calendar__weekday">日</span><span class="van-calendar__weekday">一</span><span class="van-calendar__weekday">二</span><span class="van-calendar__weekday">三</span><span class="van-calendar__weekday">四</span><span class="van-calendar__weekday">五</span><span class="van-calendar__weekday">六</span></div>
</div>
<div class="van-calendar__body">

12
src/calendar/test/__snapshots__/index.spec.js.snap
View File

@ -4,7 +4,7 @@ exports[`color prop when type is range 1`] = `
<div class="van-calendar">
<div class="van-calendar__header">
<div class="van-calendar__header-title">日期选择</div>
<div class="van-calendar__month-title">2010年1月</div>
<div class="van-calendar__header-subtitle">2010年1月</div>
<div class="van-calendar__weekdays"><span class="van-calendar__weekday">日</span><span class="van-calendar__weekday">一</span><span class="van-calendar__weekday">二</span><span class="van-calendar__weekday">三</span><span class="van-calendar__weekday">四</span><span class="van-calendar__weekday">五</span><span class="van-calendar__weekday">六</span></div>
</div>
<div class="van-calendar__body">
@ -55,7 +55,7 @@ exports[`color prop when type is single 1`] = `
<div class="van-calendar">
<div class="van-calendar__header">
<div class="van-calendar__header-title">日期选择</div>
<div class="van-calendar__month-title">2010年1月</div>
<div class="van-calendar__header-subtitle">2010年1月</div>
<div class="van-calendar__weekdays"><span class="van-calendar__weekday">日</span><span class="van-calendar__weekday">一</span><span class="van-calendar__weekday">二</span><span class="van-calendar__weekday">三</span><span class="van-calendar__weekday">四</span><span class="van-calendar__weekday">五</span><span class="van-calendar__weekday">六</span></div>
</div>
<div class="van-calendar__body">
@ -106,7 +106,7 @@ exports[`formatter prop 1`] = `
<div class="van-calendar">
<div class="van-calendar__header">
<div class="van-calendar__header-title">日期选择</div>
<div class="van-calendar__month-title">2010年1月</div>
<div class="van-calendar__header-subtitle">2010年1月</div>
<div class="van-calendar__weekdays"><span class="van-calendar__weekday">日</span><span class="van-calendar__weekday">一</span><span class="van-calendar__weekday">二</span><span class="van-calendar__weekday">三</span><span class="van-calendar__weekday">四</span><span class="van-calendar__weekday">五</span><span class="van-calendar__weekday">六</span></div>
</div>
<div class="van-calendar__body">
@ -163,7 +163,7 @@ exports[`popup wrapper 2`] = `
<div class="van-calendar">
<div class="van-calendar__header">
<div class="van-calendar__header-title">日期选择</div>
<div class="van-calendar__month-title">2010年1月</div>
<div class="van-calendar__header-subtitle">2010年1月</div>
<div class="van-calendar__weekdays"><span class="van-calendar__weekday">日</span><span class="van-calendar__weekday">一</span><span class="van-calendar__weekday">二</span><span class="van-calendar__weekday">三</span><span class="van-calendar__weekday">四</span><span class="van-calendar__weekday">五</span><span class="van-calendar__weekday">六</span></div>
</div>
<div class="van-calendar__body">
@ -216,7 +216,7 @@ exports[`row-height prop 1`] = `
<div class="van-calendar">
<div class="van-calendar__header">
<div class="van-calendar__header-title">日期选择</div>
<div class="van-calendar__month-title">2010年1月</div>
<div class="van-calendar__header-subtitle">2010年1月</div>
<div class="van-calendar__weekdays"><span class="van-calendar__weekday">日</span><span class="van-calendar__weekday">一</span><span class="van-calendar__weekday">二</span><span class="van-calendar__weekday">三</span><span class="van-calendar__weekday">四</span><span class="van-calendar__weekday">五</span><span class="van-calendar__weekday">六</span></div>
</div>
<div class="van-calendar__body">
@ -267,7 +267,7 @@ exports[`title & footer slot 1`] = `
<div class="van-calendar">
<div class="van-calendar__header">
<div class="van-calendar__header-title">Custom Title</div>
<div class="van-calendar__month-title">2010年1月</div>
<div class="van-calendar__header-subtitle">2010年1月</div>
<div class="van-calendar__weekdays"><span class="van-calendar__weekday">日</span><span class="van-calendar__weekday">一</span><span class="van-calendar__weekday">二</span><span class="van-calendar__weekday">三</span><span class="van-calendar__weekday">四</span><span class="van-calendar__weekday">五</span><span class="van-calendar__weekday">六</span></div>
</div>
<div class="van-calendar__body">

31
src/calendar/test/prop.spec.js
View File

@ -25,15 +25,42 @@ test('max-range prop', async () => {
expect(wrapper.emitted('confirm')).toBeFalsy();
});
test('show-title prop', async () => {
test('show-title prop', () => {
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();
});
test('show-subtitle prop', () => {
const wrapper = mount(Calendar, {
propsData: {
value: true,
},
});
expect(wrapper.contains('.van-calendar__header-subtitle')).toBeTruthy();
wrapper.setProps({ showSubtitle: false });
expect(wrapper.contains('.van-calendar__header-subtitle')).toBeFalsy();
});
test('hide close icon when there is no title', () => {
const wrapper = mount(Calendar, {
propsData: {
value: true,
},
});
expect(wrapper.contains('.van-popup__close-icon')).toBeTruthy();
wrapper.setProps({
showTitle: false,
showSubtitle: false,
});
expect(wrapper.contains('.van-popup__close-icon')).toBeFalsy();
});

1
src/style/var.less
View File

@ -142,6 +142,7 @@
@calendar-header-box-shadow: 0 2px 10px rgba(125, 126, 128, 0.16);
@calendar-header-title-height: 44px;
@calendar-header-title-font-size: @font-size-lg;
@calendar-header-subtitle-font-size: @font-size-md;
@calendar-weekdays-height: 30px;
@calendar-weekdays-font-size: @font-size-sm;
@calendar-month-title-font-size: @font-size-md;