mirror of
https://gitee.com/vant-contrib/vant.git
synced 2025-05-26 00:09:15 +08:00
fix(Calendar): should not render all months on mounted (#7564)
This commit is contained in:
neverland
GitHub
parent
5b4e063fa9
commit
0bd1128b91
@ -26,7 +26,6 @@ export default createComponent({
|
||||
currentDate: [Date, Array],
|
||||
allowSameDay: Boolean,
|
||||
showSubtitle: Boolean,
|
||||
realRowHeight: Number,
|
||||
showMonthTitle: Boolean,
|
||||
firstDayOfWeek: Number,
|
||||
},
|
||||
@ -66,15 +65,13 @@ export default createComponent({
|
||||
return this.visible || !this.lazyRender;
|
||||
},
|
||||
|
||||
monthStyle() {
|
||||
if (!this.shouldRender) {
|
||||
const padding =
|
||||
Math.ceil((this.totalDay + this.offset) / 7) * this.realRowHeight;
|
||||
|
||||
return {
|
||||
paddingBottom: `${padding}px`,
|
||||
};
|
||||
placeholders() {
|
||||
const rows = [];
|
||||
const count = Math.ceil((this.totalDay + this.offset) / 7);
|
||||
for (let day = 1; day <= count; day++) {
|
||||
rows.push({ type: 'placeholder' });
|
||||
}
|
||||
return rows;
|
||||
},
|
||||
|
||||
days() {
|
||||
@ -104,23 +101,6 @@ 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) {
|
||||
@ -238,6 +218,11 @@ export default createComponent({
|
||||
height: this.rowHeightWithUnit,
|
||||
};
|
||||
|
||||
if (type === 'placeholder') {
|
||||
style.width = '100%';
|
||||
return style;
|
||||
}
|
||||
|
||||
if (index === 0) {
|
||||
style.marginLeft = `${(100 * this.offset) / 7}%`;
|
||||
}
|
||||
@ -266,22 +251,19 @@ export default createComponent({
|
||||
},
|
||||
|
||||
genMark() {
|
||||
if (this.showMark) {
|
||||
if (this.showMark && this.shouldRender) {
|
||||
return <div class={bem('month-mark')}>{this.date.getMonth() + 1}</div>;
|
||||
}
|
||||
},
|
||||
|
||||
genDays() {
|
||||
if (this.shouldRender) {
|
||||
return (
|
||||
<div ref="days" role="grid" class={bem('days')}>
|
||||
{this.genMark()}
|
||||
{this.days.map(this.genDay)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return <div ref="days" />;
|
||||
const days = this.shouldRender ? this.days : this.placeholders;
|
||||
return (
|
||||
<div ref="days" role="grid" class={bem('days')}>
|
||||
{this.genMark()}
|
||||
{days.map(this.genDay)}
|
||||
</div>
|
||||
);
|
||||
},
|
||||
|
||||
genDay(item, index) {
|
||||
@ -304,8 +286,6 @@ export default createComponent({
|
||||
if (type === 'selected') {
|
||||
return (
|
||||
<div
|
||||
ref="day"
|
||||
refInFor
|
||||
role="gridcell"
|
||||
style={style}
|
||||
class={[bem('day'), item.className]}
|
||||
@ -330,8 +310,6 @@ export default createComponent({
|
||||
|
||||
return (
|
||||
<div
|
||||
ref="day"
|
||||
refInFor
|
||||
role="gridcell"
|
||||
style={style}
|
||||
class={[bem('day', type), item.className]}
|
||||
@ -348,7 +326,7 @@ export default createComponent({
|
||||
|
||||
render() {
|
||||
return (
|
||||
<div class={bem('month')} ref="month" style={this.monthStyle}>
|
||||
<div class={bem('month')} ref="month">
|
||||
{this.genTitle()}
|
||||
{this.genDays()}
|
||||
</div>
|
||||
|
||||
@ -112,7 +112,6 @@ export default createComponent({
|
||||
return {
|
||||
subtitle: '',
|
||||
currentDate: this.getInitialDate(),
|
||||
realRowHeight: 0,
|
||||
};
|
||||
},
|
||||
|
||||
@ -404,10 +403,6 @@ export default createComponent({
|
||||
this.$emit('confirm', copyDates(this.currentDate));
|
||||
},
|
||||
|
||||
onUpdateHeight(height) {
|
||||
this.realRowHeight = height;
|
||||
},
|
||||
|
||||
genMonth(date, index) {
|
||||
const showMonthTitle = index !== 0 || !this.showSubtitle;
|
||||
return (
|
||||
@ -426,11 +421,9 @@ 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}
|
||||
/>
|
||||
);
|
||||
},
|
||||
|
||||
@ -64,13 +64,13 @@ 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: 0px;">
|
||||
<div class="van-calendar__month">
|
||||
<div role="grid" class="van-calendar__days">
|
||||
<div class="van-calendar__month-mark">1</div>
|
||||
<div class="van-calendar__month-mark" style="">1</div>
|
||||
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled" style="margin-left: 0%;">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" style="">2</div>
|
||||
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled" style="">3</div>
|
||||
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled" style="">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>
|
||||
@ -102,14 +102,14 @@ 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: 0px;">
|
||||
<div class="van-calendar__month">
|
||||
<div class="van-calendar__month-title">2012年2月</div>
|
||||
<div role="grid" class="van-calendar__days">
|
||||
<div class="van-calendar__month-mark">2</div>
|
||||
<div class="van-calendar__month-mark" style="">2</div>
|
||||
<div role="gridcell" tabindex="-1" class="van-calendar__day" style="margin-left: 42.857142857142854%;">1</div>
|
||||
<div role="gridcell" tabindex="-1" class="van-calendar__day">2</div>
|
||||
<div role="gridcell" tabindex="-1" class="van-calendar__day">3</div>
|
||||
<div role="gridcell" tabindex="-1" class="van-calendar__day">4</div>
|
||||
<div role="gridcell" tabindex="-1" class="van-calendar__day" style="">2</div>
|
||||
<div role="gridcell" tabindex="-1" class="van-calendar__day" style="">3</div>
|
||||
<div role="gridcell" tabindex="-1" class="van-calendar__day" style="">4</div>
|
||||
<div role="gridcell" tabindex="-1" class="van-calendar__day">5</div>
|
||||
<div role="gridcell" tabindex="-1" class="van-calendar__day">6</div>
|
||||
<div role="gridcell" tabindex="-1" class="van-calendar__day">7</div>
|
||||
@ -137,14 +137,14 @@ 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: 0px;">
|
||||
<div class="van-calendar__month">
|
||||
<div class="van-calendar__month-title">2012年3月</div>
|
||||
<div role="grid" class="van-calendar__days">
|
||||
<div class="van-calendar__month-mark">3</div>
|
||||
<div class="van-calendar__month-mark" style="">3</div>
|
||||
<div role="gridcell" tabindex="-1" class="van-calendar__day" style="margin-left: 57.142857142857146%;">1</div>
|
||||
<div role="gridcell" tabindex="-1" class="van-calendar__day">2</div>
|
||||
<div role="gridcell" tabindex="-1" class="van-calendar__day">3</div>
|
||||
<div role="gridcell" tabindex="-1" class="van-calendar__day">4</div>
|
||||
<div role="gridcell" tabindex="-1" class="van-calendar__day" style="">2</div>
|
||||
<div role="gridcell" tabindex="-1" class="van-calendar__day" style="">3</div>
|
||||
<div role="gridcell" tabindex="-1" class="van-calendar__day" style="">4</div>
|
||||
<div role="gridcell" tabindex="-1" class="van-calendar__day">5</div>
|
||||
<div role="gridcell" tabindex="-1" class="van-calendar__day">6</div>
|
||||
<div role="gridcell" tabindex="-1" class="van-calendar__day">7</div>
|
||||
|
||||
@ -8,14 +8,14 @@ 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: 0px;">
|
||||
<div class="van-calendar__month">
|
||||
<div role="grid" class="van-calendar__days">
|
||||
<div class="van-calendar__month-mark">1</div>
|
||||
<div class="van-calendar__month-mark" style="">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" style="">2</div>
|
||||
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled" style="">3</div>
|
||||
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled" style="">4</div>
|
||||
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled" style="">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>
|
||||
@ -61,14 +61,14 @@ 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: 0px;">
|
||||
<div class="van-calendar__month">
|
||||
<div role="grid" class="van-calendar__days">
|
||||
<div class="van-calendar__month-mark">1</div>
|
||||
<div class="van-calendar__month-mark" style="">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" style="">2</div>
|
||||
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled" style="">3</div>
|
||||
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled" style="">4</div>
|
||||
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled" style="">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>
|
||||
@ -114,14 +114,14 @@ 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: 0px;">
|
||||
<div class="van-calendar__month">
|
||||
<div role="grid" class="van-calendar__days">
|
||||
<div class="van-calendar__month-mark">1</div>
|
||||
<div class="van-calendar__month-mark" style="">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" style="">2</div>
|
||||
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled" style="">3</div>
|
||||
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled" style="">4</div>
|
||||
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled" style="">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>
|
||||
@ -173,14 +173,14 @@ 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: 0px;">
|
||||
<div class="van-calendar__month">
|
||||
<div role="grid" class="van-calendar__days">
|
||||
<div class="van-calendar__month-mark">1</div>
|
||||
<div class="van-calendar__month-mark" style="">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" style="">2</div>
|
||||
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled" style="">3</div>
|
||||
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled" style="">4</div>
|
||||
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled" style="">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>
|
||||
@ -228,9 +228,9 @@ 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: 0px;">
|
||||
<div class="van-calendar__month">
|
||||
<div role="grid" class="van-calendar__days">
|
||||
<div class="van-calendar__month-mark">1</div>
|
||||
<div class="van-calendar__month-mark" style="">1</div>
|
||||
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled" style="height: 50px; margin-left: 71.42857142857143%;">1</div>
|
||||
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled" style="height: 50px;">2</div>
|
||||
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled" style="height: 50px;">3</div>
|
||||
@ -281,14 +281,14 @@ 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: 0px;">
|
||||
<div class="van-calendar__month">
|
||||
<div role="grid" class="van-calendar__days">
|
||||
<div class="van-calendar__month-mark">1</div>
|
||||
<div class="van-calendar__month-mark" style="">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" style="">2</div>
|
||||
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled" style="">3</div>
|
||||
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled" style="">4</div>
|
||||
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled" style="">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>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user