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,17 +529,21 @@ export default defineComponent({
</div> </div>
); );
const renderCalendar = () => ( const renderCalendar = () => {
const subTitle = subtitle.value.textFn();
return (
<div class={bem()}> <div class={bem()}>
<CalendarHeader <CalendarHeader
v-slots={pick(slots, ['title', 'subtitle'])} v-slots={pick(slots, ['title', 'subtitle'])}
date={subtitle.value.date} date={subtitle.value.date}
title={props.title} title={props.title}
subtitle={subtitle.value.text} subtitle={subTitle}
showTitle={props.showTitle} showTitle={props.showTitle}
showSubtitle={props.showSubtitle} showSubtitle={props.showSubtitle}
firstDayOfWeek={dayOffset.value} firstDayOfWeek={dayOffset.value}
onClickSubtitle={(event: MouseEvent) => emit('clickSubtitle', event)} onClickSubtitle={(event: MouseEvent) =>
emit('clickSubtitle', event)
}
/> />
<div ref={bodyRef} class={bem('body')} onScroll={onScroll}> <div ref={bodyRef} class={bem('body')} onScroll={onScroll}>
{months.value.map(renderMonth)} {months.value.map(renderMonth)}
@ -547,6 +551,7 @@ export default defineComponent({
{renderFooter()} {renderFooter()}
</div> </div>
); );
};
watch(() => props.show, init); watch(() => props.show, init);
watch( watch(