From 35f7e818e210327e03ad15ce3cc3d7361f5bcbc1 Mon Sep 17 00:00:00 2001
From: neverland <chenjiahan@youzan.com>
Date: Wed, 16 Sep 2020 21:07:11 +0800
Subject: [PATCH] fix(Calendar): incorrect height when using rem (#7190)
* fix(Calendar): incorrect height when using rem
* fix: realRowHeight default value
---
src/calendar/components/Month.js | 29 +++++++++++++++----
src/calendar/index.js | 13 +++++----
.../test/__snapshots__/demo.spec.js.snap | 6 ++--
.../test/__snapshots__/index.spec.js.snap | 12 ++++----
src/calendar/utils.ts | 2 --
5 files changed, 41 insertions(+), 21 deletions(-)
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 (
<div
+ ref="day"
+ refInFor
role="gridcell"
style={style}
class={[bem('day'), item.className]}
@@ -313,6 +330,8 @@ export default createComponent({
return (
<div
+ ref="day"
+ refInFor
role="gridcell"
style={style}
class={[bem('day', type), item.className]}
diff --git a/src/calendar/index.js b/src/calendar/index.js
index 4eca1687b..e3e172677 100644
--- a/src/calendar/index.js
+++ b/src/calendar/index.js
@@ -8,7 +8,6 @@ import {
copyDates,
getNextDay,
compareDay,
- ROW_HEIGHT,
calcDateNum,
compareMonth,
createComponent,
@@ -29,6 +28,7 @@ export default createComponent({
value: Boolean,
readonly: Boolean,
formatter: Function,
+ rowHeight: [Number, String],
confirmText: String,
rangePrompt: String,
defaultDate: [Date, Array],
@@ -51,10 +51,6 @@ export default createComponent({
type: Boolean,
default: true,
},
- rowHeight: {
- type: [Number, String],
- default: ROW_HEIGHT,
- },
maxRange: {
type: [Number, String],
default: null,
@@ -115,6 +111,7 @@ export default createComponent({
return {
subtitle: '',
currentDate: this.getInitialDate(),
+ realRowHeight: 0,
};
},
@@ -403,6 +400,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 (
@@ -421,9 +422,11 @@ export default createComponent({
currentDate={this.currentDate}
showSubtitle={this.showSubtitle}
allowSameDay={this.allowSameDay}
+ realRowHeight={this.realRowHeight}
showMonthTitle={showMonthTitle}
firstDayOfWeek={this.dayOffset}
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`] = `
<div class="van-calendar__weekdays"><span class="van-calendar__weekday">日</span><span class="van-calendar__weekday">一</span><span class="van-calendar__weekday">二</span><span class="van-calendar__weekday">三</span><span class="van-calendar__weekday">四</span><span class="van-calendar__weekday">五</span><span class="van-calendar__weekday">六</span></div>
</div>
<div class="van-calendar__body">
- <div class="van-calendar__month" style="padding-bottom: 320px;">
+ <div class="van-calendar__month" style="padding-bottom: 0px;">
<div role="grid" class="van-calendar__days">
<div class="van-calendar__month-mark">1</div>
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled" style="margin-left: 0%;">1</div>
@@ -102,7 +102,7 @@ exports[`renders demo correctly 1`] = `
<div role="gridcell" tabindex="-1" class="van-calendar__day">31</div>
</div>
</div>
- <div class="van-calendar__month" style="padding-bottom: 320px;">
+ <div class="van-calendar__month" style="padding-bottom: 0px;">
<div class="van-calendar__month-title">2012年2月</div>
<div role="grid" class="van-calendar__days">
<div class="van-calendar__month-mark">2</div>
@@ -137,7 +137,7 @@ exports[`renders demo correctly 1`] = `
<div role="gridcell" tabindex="-1" class="van-calendar__day">29</div>
</div>
</div>
- <div class="van-calendar__month" style="padding-bottom: 320px;">
+ <div class="van-calendar__month" style="padding-bottom: 0px;">
<div class="van-calendar__month-title">2012年3月</div>
<div role="grid" class="van-calendar__days">
<div class="van-calendar__month-mark">3</div>
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`] = `
<div class="van-calendar__weekdays"><span class="van-calendar__weekday">日</span><span class="van-calendar__weekday">一</span><span class="van-calendar__weekday">二</span><span class="van-calendar__weekday">三</span><span class="van-calendar__weekday">四</span><span class="van-calendar__weekday">五</span><span class="van-calendar__weekday">六</span></div>
</div>
<div class="van-calendar__body">
- <div class="van-calendar__month" style="padding-bottom: 384px;">
+ <div class="van-calendar__month" style="padding-bottom: 0px;">
<div role="grid" class="van-calendar__days">
<div class="van-calendar__month-mark">1</div>
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled" style="margin-left: 71.42857142857143%;">1</div>
@@ -61,7 +61,7 @@ exports[`color prop when type is single 1`] = `
<div class="van-calendar__weekdays"><span class="van-calendar__weekday">日</span><span class="van-calendar__weekday">一</span><span class="van-calendar__weekday">二</span><span class="van-calendar__weekday">三</span><span class="van-calendar__weekday">四</span><span class="van-calendar__weekday">五</span><span class="van-calendar__weekday">六</span></div>
</div>
<div class="van-calendar__body">
- <div class="van-calendar__month" style="padding-bottom: 384px;">
+ <div class="van-calendar__month" style="padding-bottom: 0px;">
<div role="grid" class="van-calendar__days">
<div class="van-calendar__month-mark">1</div>
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled" style="margin-left: 71.42857142857143%;">1</div>
@@ -114,7 +114,7 @@ exports[`formatter prop 1`] = `
<div class="van-calendar__weekdays"><span class="van-calendar__weekday">日</span><span class="van-calendar__weekday">一</span><span class="van-calendar__weekday">二</span><span class="van-calendar__weekday">三</span><span class="van-calendar__weekday">四</span><span class="van-calendar__weekday">五</span><span class="van-calendar__weekday">六</span></div>
</div>
<div class="van-calendar__body">
- <div class="van-calendar__month" style="padding-bottom: 384px;">
+ <div class="van-calendar__month" style="padding-bottom: 0px;">
<div role="grid" class="van-calendar__days">
<div class="van-calendar__month-mark">1</div>
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled" style="margin-left: 71.42857142857143%;">1</div>
@@ -173,7 +173,7 @@ exports[`popup wrapper 2`] = `
<div class="van-calendar__weekdays"><span class="van-calendar__weekday">日</span><span class="van-calendar__weekday">一</span><span class="van-calendar__weekday">二</span><span class="van-calendar__weekday">三</span><span class="van-calendar__weekday">四</span><span class="van-calendar__weekday">五</span><span class="van-calendar__weekday">六</span></div>
</div>
<div class="van-calendar__body">
- <div class="van-calendar__month" style="padding-bottom: 384px;">
+ <div class="van-calendar__month" style="padding-bottom: 0px;">
<div role="grid" class="van-calendar__days">
<div class="van-calendar__month-mark">1</div>
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled" style="margin-left: 71.42857142857143%;">1</div>
@@ -228,7 +228,7 @@ exports[`row-height prop 1`] = `
<div class="van-calendar__weekdays"><span class="van-calendar__weekday">日</span><span class="van-calendar__weekday">一</span><span class="van-calendar__weekday">二</span><span class="van-calendar__weekday">三</span><span class="van-calendar__weekday">四</span><span class="van-calendar__weekday">五</span><span class="van-calendar__weekday">六</span></div>
</div>
<div class="van-calendar__body">
- <div class="van-calendar__month" style="padding-bottom: 300px;">
+ <div class="van-calendar__month" style="padding-bottom: 0px;">
<div role="grid" class="van-calendar__days">
<div class="van-calendar__month-mark">1</div>
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled" style="height: 50px; margin-left: 71.42857142857143%;">1</div>
@@ -281,7 +281,7 @@ exports[`title & footer slot 1`] = `
<div class="van-calendar__weekdays"><span class="van-calendar__weekday">日</span><span class="van-calendar__weekday">一</span><span class="van-calendar__weekday">二</span><span class="van-calendar__weekday">三</span><span class="van-calendar__weekday">四</span><span class="van-calendar__weekday">五</span><span class="van-calendar__weekday">六</span></div>
</div>
<div class="van-calendar__body">
- <div class="van-calendar__month" style="padding-bottom: 384px;">
+ <div class="van-calendar__month" style="padding-bottom: 0px;">
<div role="grid" class="van-calendar__days">
<div class="van-calendar__month-mark">1</div>
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled" style="margin-left: 71.42857142857143%;">1</div>
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);
}