fix(Calendar): title is undefined in month-show event (#9275)

src/calendar/Calendar.tsx

@@ -10,22 +10,16 @@ import {
 } from 'vue';
 
 // Utils
-import {
-  pick,
-  isDate,
-  truthProp,
-  getScrollTop,
-  ComponentInstance,
-} from '../utils';
+import { pick, isDate, truthProp, getScrollTop } from '../utils';
 import {
   t,
   bem,
   name,
+  getToday,
   cloneDate,
   cloneDates,
   getPrevDay,
   getNextDay,
-  getToday,
   compareDay,
   calcDateNum,
   compareMonth,
@@ -45,7 +39,12 @@ import CalendarMonth from './CalendarMonth';
 import CalendarHeader from './CalendarHeader';
 
 // Types
-import type { CalendarType, CalendarExpose, CalendarDayItem } from './types';
+import type {
+  CalendarType,
+  CalendarExpose,
+  CalendarDayItem,
+  CalendarMonthInstance,
+} from './types';
 
 const props = {
   show: Boolean,
@@ -184,7 +183,7 @@ export default defineComponent({
       currentDate: getInitialDate(),
     });
 
-    const [monthRefs, setMonthRefs] = useRefs<ComponentInstance>();
+    const [monthRefs, setMonthRefs] = useRefs<CalendarMonthInstance>();
 
     const dayOffset = computed(() =>
       props.firstDayOfWeek ? +props.firstDayOfWeek % 7 : 0
@@ -255,7 +254,7 @@ export default defineComponent({
             monthRefs.value[i].showed = true;
             emit('month-show', {
               date: month.date,
-              title: month.title,
+              title: month.getTitle(),
             });
           }
         }
@@ -279,7 +278,9 @@ export default defineComponent({
       raf(() => {
         months.value.some((month, index) => {
           if (compareMonth(month, targetDate) === 0) {
-            monthRefs.value[index].scrollIntoView(bodyRef.value);
+            if (bodyRef.value) {
+              monthRefs.value[index].scrollIntoView(bodyRef.value);
+            }
             return true;
           }
 

src/calendar/CalendarMonth.tsx

@@ -1,4 +1,10 @@
-import { ref, computed, PropType, defineComponent } from 'vue';
+import {
+  ref,
+  computed,
+  PropType,
+  defineComponent,
+  ExtractPropTypes,
+} from 'vue';
 
 // Utils
 import { addUnit, setScrollTop, createNamespace, pick } from '../utils';
@@ -25,34 +31,38 @@ import type { CalendarType, CalendarDayItem, CalendarDayType } from './types';
 
 const [name] = createNamespace('calendar-month');
 
+const props = {
+  type: String as PropType<CalendarType>,
+  color: String,
+  showMark: Boolean,
+  rowHeight: [Number, String],
+  formatter: Function as PropType<(item: CalendarDayItem) => CalendarDayItem>,
+  lazyRender: Boolean,
+  currentDate: [Date, Array] as PropType<Date | Date[]>,
+  allowSameDay: Boolean,
+  showSubtitle: Boolean,
+  showMonthTitle: Boolean,
+  firstDayOfWeek: Number,
+  date: {
+    type: Date,
+    required: true as const,
+  },
+  minDate: {
+    type: Date,
+    required: true as const,
+  },
+  maxDate: {
+    type: Date,
+    required: true as const,
+  },
+};
+
+export type CalendarMonthProps = ExtractPropTypes<typeof props>;
+
 export default defineComponent({
   name,
 
-  props: {
-    type: String as PropType<CalendarType>,
-    color: String,
-    showMark: Boolean,
-    rowHeight: [Number, String],
-    formatter: Function as PropType<(item: CalendarDayItem) => CalendarDayItem>,
-    lazyRender: Boolean,
-    currentDate: [Date, Array] as PropType<Date | Date[]>,
-    allowSameDay: Boolean,
-    showSubtitle: Boolean,
-    showMonthTitle: Boolean,
-    firstDayOfWeek: Number,
-    date: {
-      type: Date,
-      required: true,
-    },
-    minDate: {
-      type: Date,
-      required: true,
-    },
-    maxDate: {
-      type: Date,
-      required: true,
-    },
-  },
+  props,
 
   emits: ['click', 'update-height'],
 

src/calendar/types.ts

@@ -1,5 +1,6 @@
 import type { ComponentPublicInstance } from 'vue';
 import type { CalendarProps } from './Calendar';
+import type { CalendarMonthProps } from './CalendarMonth';
 
 export type CalendarType = 'single' | 'range' | 'multiple';
 
@@ -33,3 +34,14 @@ export type CalendarInstance = ComponentPublicInstance<
   CalendarProps,
   CalendarExpose
 >;
+
+export type CalendarMonthInstance = ComponentPublicInstance<
+  CalendarMonthProps,
+  {
+    showed?: boolean;
+    getTitle: () => any;
+    getHeight: () => number;
+    setVisible: (value?: boolean | undefined) => void;
+    scrollIntoView: (body: Element) => void;
+  }
+>;