blackteay/vant
1
0
Fork 0
mirror of https://gitee.com/vant-contrib/vant.git synced 2025-08-10 14:39:45 +08:00
Code Issues Projects Releases Wiki Activity

fix(Calendar): row-height should work on selected month (#7046)

Browse Source
This commit is contained in:
neverland 2020-08-25 17:41:58 +08:00 committed by GitHub
parent 24ae2899b8
commit 570b324de3
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 20 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
src/calendar/components/Month.js
View File

@ -1,4 +1,4 @@
import { createNamespace } from '../../utils'; import { createNamespace, addUnit } from '../../utils';
import { setScrollTop } from '../../utils/dom/scroll'; import { setScrollTop } from '../../utils/dom/scroll';
import { import {
t, t,
@ -42,6 +42,12 @@ export default createComponent({
return formatMonthTitle(this.date); return formatMonthTitle(this.date);
}, },
rowHeightWithUnit() {
if (this.rowHeight !== ROW_HEIGHT) {
return addUnit(this.rowHeight);
}
},
offset() { offset() {
const { firstDayOfWeek } = this; const { firstDayOfWeek } = this;
@ -209,16 +215,14 @@ export default createComponent({
}, },
getDayStyle(type, index) { getDayStyle(type, index) {
const style = {}; const style = {
height: this.rowHeightWithUnit,
};
if (index === 0) { if (index === 0) {
style.marginLeft = `${(100 * this.offset) / 7}%`; style.marginLeft = `${(100 * this.offset) / 7}%`;
} }
if (this.rowHeight !== ROW_HEIGHT) {
style.height = `${this.rowHeight}px`;
}
if (this.color) { if (this.color) {
if ( if (
type === 'start' || type === 'start' ||
@ -287,7 +291,14 @@ export default createComponent({
tabindex={-1} tabindex={-1}
onClick={onClick} onClick={onClick}
> >
<div class={bem('selected-day')} style={{ background: this.color }}> <div
class={bem('selected-day')}
style={{
width: this.rowHeightWithUnit,
height: this.rowHeightWithUnit,
background: this.color,
}}
>
{TopInfo} {TopInfo}
{item.text} {item.text}
{BottomInfo} {BottomInfo}

4
src/calendar/test/__snapshots__/index.spec.js.snap
View File

@ -231,7 +231,7 @@ exports[`row-height prop 1`] = `
<div class="van-calendar__month" style="padding-bottom: 300px;"> <div class="van-calendar__month" style="padding-bottom: 300px;">
<div role="grid" class="van-calendar__days"> <div role="grid" class="van-calendar__days">
<div class="van-calendar__month-mark">1</div> <div class="van-calendar__month-mark">1</div>
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled" style="margin-left: 71.42857142857143%; height: 50px;">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;">2</div>
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled" style="height: 50px;">3</div> <div role="gridcell" class="van-calendar__day van-calendar__day--disabled" style="height: 50px;">3</div>
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled" style="height: 50px;">4</div> <div role="gridcell" class="van-calendar__day van-calendar__day--disabled" style="height: 50px;">4</div>
@ -241,7 +241,7 @@ exports[`row-height prop 1`] = `
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled" style="height: 50px;">8</div> <div role="gridcell" class="van-calendar__day van-calendar__day--disabled" style="height: 50px;">8</div>
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled" style="height: 50px;">9</div> <div role="gridcell" class="van-calendar__day van-calendar__day--disabled" style="height: 50px;">9</div>
<div role="gridcell" tabindex="-1" class="van-calendar__day" style="height: 50px;"> <div role="gridcell" tabindex="-1" class="van-calendar__day" style="height: 50px;">
<div class="van-calendar__selected-day">10</div> <div class="van-calendar__selected-day" style="width: 50px; height: 50px;">10</div>
</div> </div>
<div role="gridcell" tabindex="-1" class="van-calendar__day" style="height: 50px;">11</div> <div role="gridcell" tabindex="-1" class="van-calendar__day" style="height: 50px;">11</div>
<div role="gridcell" tabindex="-1" class="van-calendar__day" style="height: 50px;">12</div> <div role="gridcell" tabindex="-1" class="van-calendar__day" style="height: 50px;">12</div>