mirror of
https://gitee.com/vant-contrib/vant.git
synced 2025-04-27 11:56:35 +08:00
feat(Calendar): add show-mark prop
This commit is contained in:
parent
c9964d5759
commit
f65f2cc6cf
@ -34,6 +34,7 @@ Vue.use(Calendar);
|
|||||||
| max-date | 最大日期 | `Date` | 当前日期的六个月后 | - |
|
| max-date | 最大日期 | `Date` | 当前日期的六个月后 | - |
|
||||||
| button-text | 选择日期区间时,确认按钮的文字 | `string` | `确定` | - |
|
| button-text | 选择日期区间时,确认按钮的文字 | `string` | `确定` | - |
|
||||||
| button-disabled-text | 选择日期区间时,确认按钮处于禁用状态时的文字 | `string` | `确定` | - |
|
| button-disabled-text | 选择日期区间时,确认按钮处于禁用状态时的文字 | `string` | `确定` | - |
|
||||||
|
| show-mark | 是否显示月份背景水印 | `boolean` | `true` | - |
|
||||||
|
|
||||||
### Events
|
### Events
|
||||||
|
|
||||||
|
@ -7,7 +7,8 @@ export default createComponent({
|
|||||||
props: {
|
props: {
|
||||||
date: Date,
|
date: Date,
|
||||||
days: Array,
|
days: Array,
|
||||||
title: String
|
title: String,
|
||||||
|
showMark: Boolean
|
||||||
},
|
},
|
||||||
|
|
||||||
mounted() {
|
mounted() {
|
||||||
@ -31,6 +32,12 @@ export default createComponent({
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
|
genMark() {
|
||||||
|
if (this.showMark) {
|
||||||
|
return <div class={bem('month-mark')}>{this.date.getMonth() + 1}</div>;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
genDay(item) {
|
genDay(item) {
|
||||||
const { type } = item;
|
const { type } = item;
|
||||||
|
|
||||||
@ -65,7 +72,7 @@ export default createComponent({
|
|||||||
<div class={bem('month')}>
|
<div class={bem('month')}>
|
||||||
{this.genTitle()}
|
{this.genTitle()}
|
||||||
<div class={bem('days')}>
|
<div class={bem('days')}>
|
||||||
<div class={bem('month-mark')}>{this.date.getMonth() + 1}</div>
|
{this.genMark()}
|
||||||
{this.days.map(this.genDay)}
|
{this.days.map(this.genDay)}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
@ -36,6 +36,10 @@ export default createComponent({
|
|||||||
return new Date(now.getFullYear(), now.getMonth() + 6, now.getDate());
|
return new Date(now.getFullYear(), now.getMonth() + 6, now.getDate());
|
||||||
},
|
},
|
||||||
validator: isDate
|
validator: isDate
|
||||||
|
},
|
||||||
|
showMark: {
|
||||||
|
type: Boolean,
|
||||||
|
default: true
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
@ -203,6 +207,7 @@ export default createComponent({
|
|||||||
refInFor
|
refInFor
|
||||||
days={month.days}
|
days={month.days}
|
||||||
date={month.date}
|
date={month.date}
|
||||||
|
showMark={this.showMark}
|
||||||
title={index !== 0 ? month.title : ''}
|
title={index !== 0 ? month.title : ''}
|
||||||
onClick={this.onClickDay}
|
onClick={this.onClickDay}
|
||||||
/>
|
/>
|
||||||
|
Loading…
x
Reference in New Issue
Block a user