Vue自定义日历组件

责编:menVScode 2020-10-12 16:14 阅读(58)

今天给大家介绍Vue的日历组件,可自定义样式、日历类型及支持扩展,可自定义事件回调、Props数据传输。

线上demo演示:https://daishengloda.github.io/review/dist/index.html#/calendar

效果图


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


watch观察

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


Event回调


data数据



标签: 日历 vue
前端交流群: MVC前端网(menvscode.com)-qq交流群:551903636

邮箱快速注册

忘记密码