diff --git a/src/calendar/README.md b/src/calendar/README.md index aa89a3218..0b0abd264 100644 --- a/src/calendar/README.md +++ b/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` | diff --git a/src/calendar/README.zh-CN.md b/src/calendar/README.zh-CN.md index 7d3d4086b..6ae7c08e2 100644 --- a/src/calendar/README.zh-CN.md +++ b/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` | diff --git a/src/calendar/components/Month.js b/src/calendar/components/Month.js index 8c8d37952..300b7cb0a 100644 --- a/src/calendar/components/Month.js +++ b/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 (
{this.genMark()} diff --git a/src/calendar/index.js b/src/calendar/index.js index 2000a2910..24311e7b3 100644 --- a/src/calendar/index.js +++ b/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} diff --git a/src/calendar/test/__snapshots__/prop.spec.js.snap b/src/calendar/test/__snapshots__/prop.spec.js.snap new file mode 100644 index 000000000..b38b269f9 --- /dev/null +++ b/src/calendar/test/__snapshots__/prop.spec.js.snap @@ -0,0 +1,52 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`lazy-render prop 1`] = ` +
+
+
日期选择
+
+
日一二三四五六
+
+
+
+
+
1
+
1
+
2
+
3
+
4
+
5
+
6
+
7
+
8
+
9
+
10
+
11
+
12
+
13
+
14
+
15
+
16
+
17
+
18
+
19
+
+
20
+
+
21
+
22
+
23
+
24
+
25
+
26
+
27
+
28
+
29
+
30
+
31
+
+
+
+
+
+`; diff --git a/src/calendar/test/prop.spec.js b/src/calendar/test/prop.spec.js index 239ef45b8..304c56153 100644 --- a/src/calendar/test/prop.spec.js +++ b/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(); +});