fix(canendar): subtitle supports reactive (#12425)

This commit is contained in:
cc heart 2023-11-05 14:20:34 +08:00 committed by GitHub
parent 5accade265
commit 8079f7c24d
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

View File

@ -176,8 +176,8 @@ export default defineComponent({
const bodyRef = ref<HTMLElement>(); const bodyRef = ref<HTMLElement>();
const subtitle = ref<{ text: string; date?: Date }>({ const subtitle = ref<{ textFn: () => string; date?: Date }>({
text: '', textFn: () => '',
date: undefined, date: undefined,
}); });
const currentDate = ref(getInitialDate()); const currentDate = ref(getInitialDate());
@ -272,7 +272,7 @@ export default defineComponent({
/* istanbul ignore else */ /* istanbul ignore else */
if (currentMonth) { if (currentMonth) {
subtitle.value = { subtitle.value = {
text: currentMonth.getTitle(), textFn: currentMonth.getTitle,
date: currentMonth.date, date: currentMonth.date,
}; };
} }
@ -529,24 +529,29 @@ export default defineComponent({
</div> </div>
); );
const renderCalendar = () => ( const renderCalendar = () => {
<div class={bem()}> const subTitle = subtitle.value.textFn();
<CalendarHeader return (
v-slots={pick(slots, ['title', 'subtitle'])} <div class={bem()}>
date={subtitle.value.date} <CalendarHeader
title={props.title} v-slots={pick(slots, ['title', 'subtitle'])}
subtitle={subtitle.value.text} date={subtitle.value.date}
showTitle={props.showTitle} title={props.title}
showSubtitle={props.showSubtitle} subtitle={subTitle}
firstDayOfWeek={dayOffset.value} showTitle={props.showTitle}
onClickSubtitle={(event: MouseEvent) => emit('clickSubtitle', event)} showSubtitle={props.showSubtitle}
/> firstDayOfWeek={dayOffset.value}
<div ref={bodyRef} class={bem('body')} onScroll={onScroll}> onClickSubtitle={(event: MouseEvent) =>
{months.value.map(renderMonth)} emit('clickSubtitle', event)
}
/>
<div ref={bodyRef} class={bem('body')} onScroll={onScroll}>
{months.value.map(renderMonth)}
</div>
{renderFooter()}
</div> </div>
{renderFooter()} );
</div> };
);
watch(() => props.show, init); watch(() => props.show, init);
watch( watch(