fix(Calendar): incorrect height when using rem (#7190)

* fix(Calendar): incorrect height when using rem

* fix: realRowHeight default value

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]}

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}
         />
       );
     },

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>

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>

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);
 }