mirror of
https://gitee.com/vant-contrib/vant.git
synced 2025-04-06 03:57:59 +08:00
feat(Calendar): add lazy-render prop (#6245)
This commit is contained in:
neverland
GitHub
parent
2582d334ca
commit
f344334e12
@ -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` |
|
||||
|
||||
@ -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` |
|
||||
|
||||
@ -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()}
|
||||
|
||||
@ -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}
|
||||
|
||||
52
src/calendar/test/__snapshots__/prop.spec.js.snap
Normal file
52
src/calendar/test/__snapshots__/prop.spec.js.snap
Normal file
@ -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>
|
||||
`;
|
||||
@ -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();
|
||||
});
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user