image.png

首先是实现之后的效果图以及简单介绍一下功能

1. 支持标记时间
2. 支持自定义时间段
3. 支持传入class style 点击事件 是否禁用 是否展示

实现理念

因为该组件只是简单展示作用, 所以数据维护我们可以放到外面去做,里面只做状态管理

第一步定义moment的基础方法, 通过这几个方法我们可以拿到准确的日期以及对应的星期

    // 获取日期
    getDate(time) {
      return moment(time).format('MM-DD')
    },
    // 获取星期
    getWeek(time) {
      return moment(time).format('dddd')
    },
    // 获取两个日期的时间差
    getDiffDate(startTime, endTime) {
      return moment(endTime).diff(moment(startTime)) / (1000 * 60) / 60 / 24
    },
    // 获取时间戳
    getUx(time) {
      return moment(time).valueOf()
    }

第二步初始化props参数, 在这里我们计划接收4个参数 且这四个参数都不是必传的
  props: {
    DateRange: {
      type: Array,
      default: () => []
    },
    times: {
      type: Object,
      default: () => { }
    },
    empty: {
      type: String
    },
    slotRender: {
      type: Boolean,
      default: () => false
    }
  }

第一个参数DateRange 日期范围 如果不传则startTime为当天, endTime为 add 1 个月, 对应代码如下

      if (!this.DateRange.length) {
        this.startTime = this.getUx(moment().format('YYYY-MM-DD'))
        this.endTime = this.getUx(moment().add(1, 'months').format('YYYY-MM-DD'))
      } else {
        this.startTime = this.getUx(this.DateRange[0])
        this.endTime = this.getUx(this.DateRange[1])
      }

第二个参数times, 展示的是每天的各个时间点, 如果不传则渲染默认时间点.
针对默认时间点我们如果需要去动态的设置它的时间标识(右上红点), 是否禁用则需要通过ref调用组件方法

image.png

    initTimes() {
      const i = {}
      const t = ['8:30', '9:00', '9:30', '10:00', '10:30', '11:00', '11:30', '13:00', '13:30', '14:00', '14:30', '15:00', '15:30', '16:00', '16:30']
      t.forEach(v => {
        i[v] = {
          style: {},
          class: '',
          show: true,
          disabled: false,
          label: v
        }
      })
      if (!this.times) {
        this.timeButtons = i
        return
      } else {
        Object.keys(this.times).forEach(k => {
          this.times[k] = Object.assign({
            style: {},
            class: '',
            show: true,
            disabled: false,
            label: ''
          }, this.times[k])
        })
        this.timeButtons = this.times
      }
    }

组件方法如下图 这个方法会接收一个keys values 的对象, 也可以是一个数组对象

    addTimes(item) {
      if (Array.isArray(item)) {
        item.forEach(v => {
          const as = Object.assign(this.timeButtons[v.keys], v.values)
         this.$set(this.timeButtons, v.keys, as)
        })
        return
      }
      const as = Object.assign(this.timeButtons[item.keys], item.values)
      this.$set(this.timeButtons, item.keys, as)
    }

我们通过传入对应时间点, 和 动态的方法判断方法就可以了

        this.$refs.calendar.addTimes({
          keys: '8:30',
          values: {
            disabled: (item, time) => {
              if (time.week === '星期四') {
                return true
              }
              return false
            },
            dot: (item, time) => {
              if (time.week === '星期四') {
                return true
              }
              return false
            },
            label: '8:30',
            func: (item, time) => {
              console.log(item, time)
            }
          }})

第三个参数 empty 空文本的内容 字符串
如果传了这个参数 则内容将会被屏蔽掉 效果如下, 暂时未考虑不同日期,展示不同内容,如下图 6 - 24 展示空文本, 点击 6- 25 展示正常的时间选择的情况

image.png

第四个参数 slotRender slot 开关 打开后可以传一个slot内容

image.png

          <calendar :slotRender="true" ref="calendar" @handClick="handClick">
            <slot>
              <el-badge is-dot class="item">数据查询</el-badge>
            </slot>
          </calendar>

Times 参数

times是动态绑定的地方 ,所有参数都可以通过function的方式返回, 返回的参数是当前的item, 以及当前选中的tabs

// 默认参数 
style: {},
class: '',
show: true,
disabled: false,
dot: false,
label: ''

    handStyle(item) {
      if (typeof item.style === 'function') {
        return item.style(item, this.activeTabs)
      }
      return item.style
    },
    handClass(item) {
      if (typeof item.class === 'function') {
        return item.class(item, this.activeTabs)
      }
      return item.class
    },
    handShow(item) {
      if (typeof item.show === 'function') {
        return item.show(item, this.activeTabs)
      }
      return item.show
    },
    handDisabled(item) {
      if (typeof item.disabled === 'function') {
        return item.disabled(item, this.activeTabs)
      }
      return item.disabled
    },
    handClickDot(item) {
      if (typeof item.dot === 'function') {
        return item.dot(item, this.activeTabs)
      }
      return item.dot
    },
    handClick(item) {
      if (typeof item.func === 'function') {
        return item.func(item, this.activeTabs)
      }
      this.$emit('handClick', item, this.activeTabs)
    },

image.png

比如我们现在在每个周四的8:30绑定了一个时间标识, 需要点亮点则我们需要传入

        this.$refs.calendar.addTimes({
          keys: '8:30',
          values: {
            dot: (item, time) => {
              if (time.week === '星期四') {
                return true
              }
              return false
            }
          }
        })

也可以在初始化的时候传入

      times: {
        '8:30': {
          disabled: (item, time) => {
            if (time.week === '星期四') {
              return true
            }
            return false
          },
          dot: (item, time) => {
            if (time.week === '星期四') {
              return true
            }
            return false
          },
          label: '8:30',
          func: (item, time) => {
            console.log(item, time)
          }
        }