今天给大家介绍Vue的日历组件,可自定义样式、日历类型及支持扩展,可自定义事件回调、Props数据传输。
线上demo效果
示例
Template:
<Calendar
:sundayStart="true"
:calendarType="1"
:markDate="markDate"
:markDateClass="markDateClass"
:agoDayPrevent="agoDayPrevent"
:futureDayPrevent="futureDayPrevent"
@choseDay="choseDay"
@changeMonth="changeMonth">
</Calendar>
script:
data() {
return{
calendarClass: 'cal_common',
chooseDate: '',
showCalendar: 1,
markDate: ['2019/02/13','2019/02/22'],
markDateClass: [
{date:'2019/02/20',className:"mark1"},
{date:'2018/02/21',className:"mark2"}
],
agoDayPrevent: '1549728000',
futureDayPrevent: '2551024000',
}
},
methods: {
choseDay(date) {
this.chooseDate = date
},
toggleCal(type) {
this.showCalendar = type
},
changeMonth(date) {
console.log('changeMonth'+date)
}
}
Api
Props属性
markDateArray/[] 需要标记的日期
markDateClassArray/[] 定义标记的日期及className
sundayStartBoolean/true 是否以星期天开始
agoDayPreventString/0 某个日期前不允许点击(10时间戳)
futureDayPreventString/2554387200 某个日期后不允许点击
calendarClassString/'' 日历盒子的class
calendarTypeNumber/1 日历类型:1--默认;2--简易
watch观察
用来观察父组件Props传值变化,动态更新子组件
agoDayPrevent: function(val,oldVal) {/*重绘日历*/}
futureDayPrevent: function(val,oldVal){/*重绘日历*/}
Event回调
@choseDay(date) 选择日期执行
@changeMonth(date) 切换月份执行
data数据
textTop 日历头部星期排列
dateTop 日历顶部显示的当前年月
newList 当前月份需要显示的天数集合