sy-date-picker-special

安装插件

npm install sy-date-picker-special

main.js引入

import syDatePickerSpecial from 'sy-date-picker-special'
import 'sy-date-picker-special/lib/date-picker.css'

按需导入

import syDatePicker from 'sy-date-picker-special'
import 'sy-date-picker-special/lib/date-picker.css'
export default {
    components: {'syDatePickerSpecial': syDatePicker.DatePicker},
}

项目中使用

<template>
  <div id="app">
    <datePicker
	    class="calendar"
	    :showDefault="false"
	    :data-info-list="dataInfoList"
	    @handleClickDay="handleClickDay"
	    @handlePrevMonth="handlePrevMonth"
	    @handleNextMonth="handleNextMonth"
	    @handleResetTime="handleResetTime"
    />
  </div>
</template>
<script>
export default {
  name: 'App',
  data() {
    return {
      dataInfoList: [
        {
          id: 1,
          time: '2022-06-07',
          clickDay: true
        }, {
          id: 2,
          time: '2022-06-08',
          clickDay: true
        }, {
          id: 3,
          time: '2022-06-09',
          clickDay: true
        }, {
          id: 4,
          time: '2022-06-10',
          clickDay: true
        }
      ]
    }
  },
  methods: {
    handleClickDay(item) {
        console.log('点击当天不派送', item)
    },
    handlePrevMonth(date) {
        console.log('上一月',date)
    },
    handleNextMonth(date) {
        console.log('下一月',date)
    },
    handleResetTime(item) {
        console.log('点击重置时间', item)
    }
  }
}
</script>

###配置项

:showDefault="true" 默认展示的内容
:data-info-list="dataInfoList" 传入的数据（
格式：数组：
           [
              {
                  id: 1,
                  time: '2022-06-07', // 选中的日期
                  clickDay: true //是否选中
              },
           ]
          ）