feat(Calendar): add lazy-render prop (#6245)

src/calendar/README.md

@@ -228,6 +228,7 @@ Set `poppable` to `false`, the calendar will be displayed directly on the page i
 | row-height | Row height | _number \| string_ | `64` |
 | formatter | Day formatter | _(day: Day) => Day_ | - |
 | poppable | Whether to show the calendar inside a popup | _boolean_ | `true` |
+| lazy-render `v2.8.1` | Whether to enable lazy render | _boolean_ | `true` |
 | show-mark | Whether to show background month mark | _boolean_ | `true` |
 | show-title `v2.5.5` | Whether to show title | _boolean_ | `true` |
 | show-subtitle `v2.5.5` | Whether to show subtitle | _boolean_ | `true` |

src/calendar/README.zh-CN.md

@@ -230,6 +230,7 @@ export default {
 | row-height | 日期行高 | _number \| string_ | `64` |
 | formatter | 日期格式化函数 | _(day: Day) => Day_ | - |
 | poppable | 是否以弹层的形式展示日历 | _boolean_ | `true` |
+| lazy-render `v2.8.1` | 是否只渲染可视区域的内容 | _boolean_ | `true` |
 | show-mark | 是否显示月份背景水印 | _boolean_ | `true` |
 | show-title `v2.5.5` | 是否展示日历标题 | _boolean_ | `true` |
 | show-subtitle `v2.5.5` | 是否展示日历副标题（年月） | _boolean_ | `true` |

src/calendar/components/Month.js

@@ -22,6 +22,7 @@ export default createComponent({
     showMark: Boolean,
     rowHeight: [Number, String],
     formatter: Function,
+    lazyRender: Boolean,
     currentDate: [Date, Array],
     allowSameDay: Boolean,
     showSubtitle: Boolean,
@@ -47,8 +48,12 @@ export default createComponent({
       return getMonthEndDay(this.date.getFullYear(), this.date.getMonth() + 1);
     },
 
+    shouldRender() {
+      return this.visible || !this.lazyRender;
+    },
+
     monthStyle() {
-      if (!this.visible) {
+      if (!this.shouldRender) {
         const padding =
           Math.ceil((this.totalDay + this.offset) / 7) * this.rowHeight;
 
@@ -226,7 +231,7 @@ export default createComponent({
     },
 
     genDays() {
-      if (this.visible) {
+      if (this.shouldRender) {
         return (
           <div ref="days" role="grid" class={bem('days')}>
             {this.genMark()}

src/calendar/index.js

@@ -68,6 +68,10 @@ export default createComponent({
       type: Boolean,
       default: true,
     },
+    lazyRender: {
+      type: Boolean,
+      default: true,
+    },
     showMark: {
       type: Boolean,
       default: true,
@@ -363,6 +367,7 @@ export default createComponent({
           showMark={this.showMark}
           formatter={this.formatter}
           rowHeight={this.rowHeight}
+          lazyRender={this.lazyRender}
           currentDate={this.currentDate}
           showSubtitle={this.showSubtitle}
           allowSameDay={this.allowSameDay}

src/calendar/test/__snapshots__/prop.spec.js.snap

@@ -0,0 +1,52 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`lazy-render prop 1`] = `
+<div class="van-calendar">
+  <div class="van-calendar__header">
+    <div class="van-calendar__header-title">日期选择</div>
+    <div class="van-calendar__header-subtitle"></div>
+    <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">
+      <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>
+        <div role="gridcell" class="van-calendar__day van-calendar__day--disabled">2</div>
+        <div role="gridcell" class="van-calendar__day van-calendar__day--disabled">3</div>
+        <div role="gridcell" class="van-calendar__day van-calendar__day--disabled">4</div>
+        <div role="gridcell" class="van-calendar__day van-calendar__day--disabled">5</div>
+        <div role="gridcell" class="van-calendar__day van-calendar__day--disabled">6</div>
+        <div role="gridcell" class="van-calendar__day van-calendar__day--disabled">7</div>
+        <div role="gridcell" class="van-calendar__day van-calendar__day--disabled">8</div>
+        <div role="gridcell" class="van-calendar__day van-calendar__day--disabled">9</div>
+        <div role="gridcell" tabindex="-1" class="van-calendar__day">10</div>
+        <div role="gridcell" tabindex="-1" class="van-calendar__day">11</div>
+        <div role="gridcell" tabindex="-1" class="van-calendar__day">12</div>
+        <div role="gridcell" tabindex="-1" class="van-calendar__day">13</div>
+        <div role="gridcell" tabindex="-1" class="van-calendar__day">14</div>
+        <div role="gridcell" tabindex="-1" class="van-calendar__day">15</div>
+        <div role="gridcell" tabindex="-1" class="van-calendar__day">16</div>
+        <div role="gridcell" tabindex="-1" class="van-calendar__day">17</div>
+        <div role="gridcell" tabindex="-1" class="van-calendar__day">18</div>
+        <div role="gridcell" tabindex="-1" class="van-calendar__day">19</div>
+        <div role="gridcell" tabindex="-1" class="van-calendar__day">
+          <div class="van-calendar__selected-day">20</div>
+        </div>
+        <div role="gridcell" class="van-calendar__day van-calendar__day--disabled">21</div>
+        <div role="gridcell" class="van-calendar__day van-calendar__day--disabled">22</div>
+        <div role="gridcell" class="van-calendar__day van-calendar__day--disabled">23</div>
+        <div role="gridcell" class="van-calendar__day van-calendar__day--disabled">24</div>
+        <div role="gridcell" class="van-calendar__day van-calendar__day--disabled">25</div>
+        <div role="gridcell" class="van-calendar__day van-calendar__day--disabled">26</div>
+        <div role="gridcell" class="van-calendar__day van-calendar__day--disabled">27</div>
+        <div role="gridcell" class="van-calendar__day van-calendar__day--disabled">28</div>
+        <div role="gridcell" class="van-calendar__day van-calendar__day--disabled">29</div>
+        <div role="gridcell" class="van-calendar__day van-calendar__day--disabled">30</div>
+        <div role="gridcell" class="van-calendar__day van-calendar__day--disabled">31</div>
+      </div>
+    </div>
+  </div>
+  <div class="van-calendar__footer"><button type="button" class="van-button van-button--danger van-button--normal van-button--block van-button--round van-calendar__confirm"><span class="van-button__text">确定</span></button></div>
+</div>
+`;

src/calendar/test/prop.spec.js

@@ -167,3 +167,16 @@ test('min-date before current time', () => {
   wrapper.find('.van-calendar__confirm').trigger('click');
   expect(formatDate(wrapper.emitted('confirm')[0][0])).toEqual('1800/1/2');
 });
+
+test('lazy-render prop', () => {
+  const wrapper = mount(Calendar, {
+    propsData: {
+      minDate,
+      maxDate,
+      poppable: false,
+      lazyRender: false,
+    },
+  });
+
+  expect(wrapper).toMatchSnapshot();
+});