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属性

  • 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  当前月份需要显示的天数集合

 

posted on 2019-02-28 14:13  世界之魂  阅读(1413)  评论(1编辑  收藏  举报

导航