Vue自定义日历组件

Posted lodadssd

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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--简易

Event回调

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

data数据

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

 

以上是关于Vue自定义日历组件的主要内容,如果未能解决你的问题,请参考以下文章

vue 手机端日历组件

vue日历(农历)组件

vue 里面日历能够自定义价格。

vue日历背景图/calendar,elementui中 el-calendar自定义日历背景颜色

VSCode自定义代码片段1——vue主模板

VSCode自定义代码片段(vue主模板)