diff --git a/packages/vant/src/calendar/Calendar.tsx b/packages/vant/src/calendar/Calendar.tsx index 24b76472f..a3d40e1e6 100644 --- a/packages/vant/src/calendar/Calendar.tsx +++ b/packages/vant/src/calendar/Calendar.tsx @@ -175,7 +175,10 @@ export default defineComponent({ const bodyRef = ref(); - const subtitle = ref(''); + const subtitle = ref<{ text: string; date?: Date }>({ + text: '', + date: undefined, + }); const currentDate = ref(getInitialDate()); const [monthRefs, setMonthRefs] = useRefs(); @@ -267,7 +270,10 @@ export default defineComponent({ /* istanbul ignore else */ if (currentMonth) { - subtitle.value = currentMonth.getTitle(); + subtitle.value = { + text: currentMonth.getTitle(), + date: currentMonth.date, + }; } }; @@ -525,8 +531,9 @@ export default defineComponent({
{ if (props.showSubtitle) { - const title = slots.subtitle ? slots.subtitle() : props.subtitle; + const title = slots.subtitle + ? slots.subtitle({ + date: props.date, + text: props.subtitle, + }) + : props.subtitle; return (
{title} diff --git a/packages/vant/src/calendar/README.md b/packages/vant/src/calendar/README.md index c5bfebe3d..541df1aec 100644 --- a/packages/vant/src/calendar/README.md +++ b/packages/vant/src/calendar/README.md @@ -331,14 +331,14 @@ Following props are supported when the type is multiple ### Slots -| Name | Description | SlotProps | -| --------------------- | ------------------------- | ----------------------- | -| title | Custom title | - | -| subtitle `v3.1.3` | Custom subtitle | - | -| footer | Custom footer | - | -| confirm-text `v3.2.6` | Custom confirm text | _{ disabled: boolean }_ | -| top-info `v3.0.17` | Custom top info of day | _day: Day_ | -| bottom-info `v3.0.17` | Custom bottom info of day | _day: Day_ | +| Name | Description | SlotProps | +| --- | --- | --- | +| title | Custom title | - | +| subtitle `v3.1.3` | Custom subtitle | _{ text: string, date?: Date }_ | +| footer | Custom footer | - | +| confirm-text `v3.2.6` | Custom confirm text | _{ disabled: boolean }_ | +| top-info `v3.0.17` | Custom top info of day | _day: Day_ | +| bottom-info `v3.0.17` | Custom bottom info of day | _day: Day_ | ### Methods diff --git a/packages/vant/src/calendar/README.zh-CN.md b/packages/vant/src/calendar/README.zh-CN.md index 8025cb2ed..862431e85 100644 --- a/packages/vant/src/calendar/README.zh-CN.md +++ b/packages/vant/src/calendar/README.zh-CN.md @@ -337,14 +337,14 @@ export default { ### Slots -| 名称 | 说明 | 参数 | -| --------------------- | ------------------------ | ----------------------- | -| title | 自定义标题 | - | -| subtitle `v3.1.3` | 自定义日历副标题 | - | -| footer | 自定义底部区域内容 | - | -| confirm-text `v3.2.6` | 自定义确认按钮的内容 | _{ disabled: boolean }_ | -| top-info `v3.0.17` | 自定义日期上方的提示信息 | _day: Day_ | -| bottom-info `v3.0.17` | 自定义日期下方的提示信息 | _day: Day_ | +| 名称 | 说明 | 参数 | +| --- | --- | --- | +| title | 自定义标题 | - | +| subtitle `v3.1.3` | 自定义日历副标题 | _{ text: string, date?: Date }_ | +| footer | 自定义底部区域内容 | - | +| confirm-text `v3.2.6` | 自定义确认按钮的内容 | _{ disabled: boolean }_ | +| top-info `v3.0.17` | 自定义日期上方的提示信息 | _day: Day_ | +| bottom-info `v3.0.17` | 自定义日期下方的提示信息 | _day: Day_ | ### 方法 diff --git a/packages/vant/src/calendar/test/__snapshots__/index.spec.ts.snap b/packages/vant/src/calendar/test/__snapshots__/index.spec.ts.snap index 0d69349fa..4943bdb0b 100644 --- a/packages/vant/src/calendar/test/__snapshots__/index.spec.ts.snap +++ b/packages/vant/src/calendar/test/__snapshots__/index.spec.ts.snap @@ -934,6 +934,12 @@ exports[`should render confirm-text slot correctly 1`] = ` `; +exports[`should render subtitle slot with params 1`] = ` +
+ Custom Subtitle +
+`; + exports[`should render title、footer、subtitle slot correctly 1`] = `
diff --git a/packages/vant/src/calendar/test/index.spec.ts b/packages/vant/src/calendar/test/index.spec.ts index 7e536e2c6..2975ebb8c 100644 --- a/packages/vant/src/calendar/test/index.spec.ts +++ b/packages/vant/src/calendar/test/index.spec.ts @@ -365,6 +365,27 @@ test('should render title、footer、subtitle slot correctly', async () => { expect(wrapper.html()).toMatchSnapshot(); }); +test('should render subtitle slot with params', async () => { + const wrapper = mount(Calendar, { + props: { + minDate, + maxDate, + poppable: false, + defaultDate: minDate, + lazyRender: false, + }, + slots: { + subtitle: ({ text }) => `Custom Subtitle ${text}`, + }, + }); + + await later(); + + expect( + wrapper.find('.van-calendar__header-subtitle').html() + ).toMatchSnapshot(); +}); + test('should reset when type changed', async () => { const wrapper = mount(Calendar, { props: {