diff --git a/src/calendar/components/Month.js b/src/calendar/components/Month.js index 5c1e57998..4d61d6498 100644 --- a/src/calendar/components/Month.js +++ b/src/calendar/components/Month.js @@ -1,4 +1,4 @@ -import { ref, computed } from 'vue'; +import { ref, computed, watch, nextTick } from 'vue'; // Utils import { createNamespace, addUnit } from '../../utils'; @@ -9,7 +9,6 @@ import { t, bem, compareDay, - ROW_HEIGHT, getPrevDay, getNextDay, formatMonthTitle, @@ -17,8 +16,9 @@ import { // Composition import { useToggle } from '@vant/use'; -import { useHeight } from '../../composition/use-rect'; +import { useRefs } from '../../composition/use-refs'; import { useExpose } from '../../composition/use-expose'; +import { useRect, useHeight } from '../../composition/use-rect'; // Components import Day from './Day'; @@ -39,25 +39,23 @@ export default createComponent({ currentDate: [Date, Array], allowSameDay: Boolean, showSubtitle: Boolean, + realRowHeight: Number, showMonthTitle: Boolean, firstDayOfWeek: Number, }, - emits: ['click'], + emits: ['click', 'update-height'], setup(props, { emit }) { const [visible, setVisible] = useToggle(); + const [dayRefs, setDayRefs] = useRefs(); const daysRef = ref(); const monthRef = ref(); const height = useHeight(monthRef); const title = computed(() => formatMonthTitle(props.date)); - const rowHeight = computed(() => { - if (props.rowHeight !== ROW_HEIGHT) { - return addUnit(props.rowHeight); - } - }); + const rowHeight = computed(() => addUnit(props.rowHeight)); const offset = computed(() => { const realDay = props.date.getDay(); @@ -77,7 +75,7 @@ export default createComponent({ const monthStyle = computed(() => { if (!shouldRender.value) { const rowCount = Math.ceil((totalDay.value + offset.value) / 7); - const padding = rowCount * unitToPx(props.rowHeight); + const padding = rowCount * unitToPx(props.realRowHeight); return { paddingBottom: `${padding}px`, }; @@ -227,6 +225,7 @@ export default createComponent({ const renderDay = (item, index) => ( ; }; + watch( + () => props.realRowHeight, + () => { + height.value = useRect(monthRef).height; + console.log('height.value', height.value); + } + ); + + watch(shouldRender, (value) => { + if (value) { + nextTick(() => { + if (dayRefs.value[0] && !props.realRowHeight) { + const { height } = dayRefs.value[0].$el.getBoundingClientRect(); + emit('update-height', height); + } + }); + } + }); + useExpose({ height, getDate, diff --git a/src/calendar/index.js b/src/calendar/index.js index 31929c68a..4ee5c1bbb 100644 --- a/src/calendar/index.js +++ b/src/calendar/index.js @@ -9,7 +9,6 @@ import { copyDates, getNextDay, compareDay, - ROW_HEIGHT, calcDateNum, compareMonth, createComponent, @@ -31,6 +30,7 @@ export default createComponent({ readonly: Boolean, teleport: [String, Object], formatter: Function, + rowHeight: [Number, String], confirmText: String, rangePrompt: String, defaultDate: [Date, Array], @@ -52,10 +52,6 @@ export default createComponent({ type: Boolean, default: true, }, - rowHeight: { - type: [Number, String], - default: ROW_HEIGHT, - }, maxRange: { type: [Number, String], default: null, @@ -119,6 +115,7 @@ export default createComponent({ return { subtitle: '', currentDate: this.getInitialDate(), + realRowHeight: 0, }; }, @@ -409,6 +406,10 @@ export default createComponent({ this.$emit('confirm', copyDates(this.currentDate)); }, + onUpdateHeight(height) { + this.realRowHeight = height; + }, + genMonth(date, index) { const showMonthTitle = index !== 0 || !this.showSubtitle; return ( @@ -431,8 +432,10 @@ export default createComponent({ 'currentDate', 'showSubtitle', 'allowSameDay', + 'realRowHeight', ])} onClick={this.onClickDay} + onUpdate-height={this.onUpdateHeight} /> ); }, 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); }