diff --git a/src/calendar/Calendar.tsx b/src/calendar/Calendar.tsx index b42566cc6..a7ed929c0 100644 --- a/src/calendar/Calendar.tsx +++ b/src/calendar/Calendar.tsx @@ -115,8 +115,9 @@ export default defineComponent({ 'confirm', 'unselect', 'month-show', - 'update:show', 'over-range', + 'update:show', + 'click-subtitle', ], setup(props, { emit, slots }) { @@ -495,6 +496,9 @@ export default defineComponent({ showTitle={props.showTitle} showSubtitle={props.showSubtitle} firstDayOfWeek={dayOffset.value} + onClick-subtitle={(event: MouseEvent) => { + emit('click-subtitle', event); + }} />
{months.value.map(renderMonth)} diff --git a/src/calendar/CalendarHeader.tsx b/src/calendar/CalendarHeader.tsx index 30779ae25..896b5648b 100644 --- a/src/calendar/CalendarHeader.tsx +++ b/src/calendar/CalendarHeader.tsx @@ -15,7 +15,9 @@ export default defineComponent({ firstDayOfWeek: Number, }, - setup(props, { slots }) { + emits: ['click-subtitle'], + + setup(props, { slots, emit }) { const renderTitle = () => { if (props.showTitle) { const text = props.title || t('title'); @@ -24,10 +26,18 @@ export default defineComponent({ } }; + const onClickSubtitle = (event: MouseEvent) => { + emit('click-subtitle', event); + }; + const renderSubtitle = () => { if (props.showSubtitle) { const title = slots.subtitle ? slots.subtitle() : props.subtitle; - return
{title}
; + return ( +
+ {title} +
+ ); } }; diff --git a/src/calendar/README.md b/src/calendar/README.md index 4793037c2..7507a42d2 100644 --- a/src/calendar/README.md +++ b/src/calendar/README.md @@ -326,6 +326,7 @@ Following props are supported when the type is multiple | unselect | Emitted when unselect date when type is multiple | _value: Date_ | | month-show | Emitted when a month enters the visible area | _{ date: Date, title: string }_ | | over-range | Emitted when exceeded max range | - | +| click-subtitle `v3.1.3` | Emitted when clicking the subtitle | _event: MouseEvent_ | ### Slots diff --git a/src/calendar/README.zh-CN.md b/src/calendar/README.zh-CN.md index 51131ba59..625800199 100644 --- a/src/calendar/README.zh-CN.md +++ b/src/calendar/README.zh-CN.md @@ -332,6 +332,7 @@ export default { | unselect | 当日历组件的 `type` 为 `multiple` 时,取消选中日期时触发 | _value: Date_ | | month-show | 当某个月份进入可视区域时触发 | _{ date: Date, title: string }_ | | over-range | 范围选择超过最多可选天数时触发 | - | +| click-subtitle `v3.1.3` | 点击日历副标题时触发 | _event: MouseEvent_ | ### Slots diff --git a/src/calendar/test/index.spec.ts b/src/calendar/test/index.spec.ts index b9b76b33d..750682199 100644 --- a/src/calendar/test/index.spec.ts +++ b/src/calendar/test/index.spec.ts @@ -554,3 +554,18 @@ test('should render top-info and bottom-info slot correctly', async () => { expect(wrapper.find('.van-calendar__day').html()).toMatchSnapshot(); }); + +test('should emit click-subtitle event when clicking the subtitle', async () => { + const wrapper = mount(Calendar, { + props: { + minDate, + maxDate, + poppable: false, + lazyRender: false, + }, + }); + + await later(); + wrapper.find('.van-calendar__header-subtitle').trigger('click'); + expect(wrapper.emitted('click-subtitle')).toBeTruthy(); +});