diff --git a/src/calendar/components/Month.js b/src/calendar/components/Month.js index 63a0b9abc..9a6508a00 100644 --- a/src/calendar/components/Month.js +++ b/src/calendar/components/Month.js @@ -4,7 +4,6 @@ import { t, bem, compareDay, - ROW_HEIGHT, getPrevDay, getNextDay, formatMonthTitle, @@ -27,6 +26,7 @@ export default createComponent({ currentDate: [Date, Array], allowSameDay: Boolean, showSubtitle: Boolean, + realRowHeight: Number, showMonthTitle: Boolean, firstDayOfWeek: Number, }, @@ -43,9 +43,7 @@ export default createComponent({ }, rowHeightWithUnit() { - if (this.rowHeight !== ROW_HEIGHT) { - return addUnit(this.rowHeight); - } + return addUnit(this.rowHeight); }, offset() { @@ -71,7 +69,7 @@ export default createComponent({ monthStyle() { if (!this.shouldRender) { const padding = - Math.ceil((this.totalDay + this.offset) / 7) * this.rowHeight; + Math.ceil((this.totalDay + this.offset) / 7) * this.realRowHeight; return { paddingBottom: `${padding}px`, @@ -106,6 +104,23 @@ export default createComponent({ }, }, + watch: { + shouldRender(value) { + if (value) { + this.$nextTick(() => { + if (this.$refs.day[0] && !this.realRowHeight) { + const { height } = this.$refs.day[0].getBoundingClientRect(); + this.$emit('update-height', height); + } + }); + } + }, + + realRowHeight() { + this.height = null; + }, + }, + methods: { getHeight() { if (!this.height) { @@ -289,6 +304,8 @@ export default createComponent({ if (type === 'selected') { return (
); }, diff --git a/src/calendar/test/__snapshots__/demo.spec.js.snap b/src/calendar/test/__snapshots__/demo.spec.js.snap index 2e5ac8a76..b0a56dda3 100644 --- a/src/calendar/test/__snapshots__/demo.spec.js.snap +++ b/src/calendar/test/__snapshots__/demo.spec.js.snap @@ -64,7 +64,7 @@ exports[`renders demo correctly 1`] = `
-
+
1
1
@@ -102,7 +102,7 @@ exports[`renders demo correctly 1`] = `
31
-
+
2012年2月
2
@@ -137,7 +137,7 @@ exports[`renders demo correctly 1`] = `
29
-
+
2012年3月
3
diff --git a/src/calendar/test/__snapshots__/index.spec.js.snap b/src/calendar/test/__snapshots__/index.spec.js.snap index f5af9ddcf..b27a7f541 100644 --- a/src/calendar/test/__snapshots__/index.spec.js.snap +++ b/src/calendar/test/__snapshots__/index.spec.js.snap @@ -8,7 +8,7 @@ exports[`color prop when type is range 1`] = `
-
+
1
1
@@ -61,7 +61,7 @@ exports[`color prop when type is single 1`] = `
-
+
1
1
@@ -114,7 +114,7 @@ exports[`formatter prop 1`] = `
-
+
1
1
@@ -173,7 +173,7 @@ exports[`popup wrapper 2`] = `
-
+
1
1
@@ -228,7 +228,7 @@ exports[`row-height prop 1`] = `
-
+
1
1
@@ -281,7 +281,7 @@ exports[`title & footer slot 1`] = `
-
+
1
1
diff --git a/src/calendar/utils.ts b/src/calendar/utils.ts index 1e078770d..dfff1e390 100644 --- a/src/calendar/utils.ts +++ b/src/calendar/utils.ts @@ -4,8 +4,6 @@ const [createComponent, bem, t] = createNamespace('calendar'); export { createComponent, bem, t }; -export const ROW_HEIGHT = 64; - export function formatMonthTitle(date: Date) { return t('monthTitle', date.getFullYear(), date.getMonth() + 1); }