blackteay/vant
1
0
Fork 0
mirror of https://gitee.com/vant-contrib/vant.git synced 2025-04-06 03:57:59 +08:00
Code Issues Projects Releases Wiki Activity

fix(Calendar): does not show current month with larger screen sizes (#7355)

Browse Source 
* fix(Calendar): does not show current month with larger screen sizes

* chore: fix demo snapshot
This commit is contained in:
neverland 2020-10-18 19:50:34 +08:00 committed by GitHub
parent 27d4cb7acf
commit 1b97315b54
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 50 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
src/calendar/index.js
View File

@ -266,28 +266,33 @@ export default createComponent({
let height = 0; let height = 0;
let currentMonth; let currentMonth;
let visibleIndex; const visibleRange = [-1, -1];
for (let i = 0; i < months.length; i++) { for (let i = 0; i < months.length; i++) {
const visible = height <= bottom && height + heights[i] >= top; const visible = height <= bottom && height + heights[i] >= top;
if (visible && !currentMonth) { if (visible) {
visibleIndex = i; visibleRange[1] = i;
currentMonth = months[i];
}
if (!months[i].visible && visible) { if (!currentMonth) {
this.$emit('month-show', { currentMonth = months[i];
date: months[i].date, visibleRange[0] = i;
title: months[i].title, }
});
if (!months[i].visible) {
this.$emit('month-show', {
date: months[i].date,
title: months[i].title,
});
}
} }
height += heights[i]; height += heights[i];
} }
months.forEach((month, index) => { months.forEach((month, index) => {
month.visible = index >= visibleIndex - 1 && index <= visibleIndex + 1; month.visible =
index >= visibleRange[0] - 1 && index <= visibleRange[1] + 1;
}); });
/* istanbul ignore else */ /* istanbul ignore else */

35
src/calendar/test/__snapshots__/demo.spec.js.snap
View File

@ -139,7 +139,40 @@ exports[`renders demo correctly 1`] = `
</div> </div>
<div class="van-calendar__month" style="padding-bottom: 0px;"> <div class="van-calendar__month" style="padding-bottom: 0px;">
<div class="van-calendar__month-title">2012年3月</div> <div class="van-calendar__month-title">2012年3月</div>
<div></div> <div role="grid" class="van-calendar__days">
<div class="van-calendar__month-mark">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">5</div>
<div role="gridcell" tabindex="-1" class="van-calendar__day">6</div>
<div role="gridcell" tabindex="-1" class="van-calendar__day">7</div>
<div role="gridcell" tabindex="-1" class="van-calendar__day">8</div>
<div role="gridcell" tabindex="-1" class="van-calendar__day">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">20</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> </div>
<div class="van-calendar__footer"></div> <div class="van-calendar__footer"></div>