Vue自定义日历组件

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