Vue自定义日历组件

今天给大家介绍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属性

• markDate^Array/[]  需要标记的日期
• markDateClass^Array/[]  定义标记的日期及className
• sundayStart^Boolean/true  是否以星期天开始
• agoDayPrevent^String/0  某个日期前不允许点击（10时间戳）
• futureDayPrevent^{String/2554387200}  某个日期后不允许点击
• calendarClass^String/''  日历盒子的class
• calendarType^Number/1  日历类型：1--默认；2--简易

watch观察

用来观察父组件Props传值变化，动态更新子组件

• agoDayPrevent: function(val,oldVal) {/*重绘日历*/}
• futureDayPrevent: function(val,oldVal){/*重绘日历*/}

Event回调

• @choseDay^(date)  选择日期执行
• @changeMonth^(date)  切换月份执行

data数据

• textTop  日历头部星期排列
• dateTop  日历顶部显示的当前年月
• newList  当前月份需要显示的天数集合