Vue自定义日历组件

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

示例

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

巴特西

Vue自定义日历组件

示例

Api

最新文章

热门文章