bin-ui/src/components/date-picker/base/mixin.js

基于 vue2.6 / vue-cli3 的 UI 组件库

import { clearHours } from '../util/util'

export default {
  name: 'PanelTable',
  props: {
    tableDate: {
      type: Date,
      required: true
    },
    disabledDate: {
      type: Function
    },
    selectionMode: {
      type: String,
      required: true
    },
    value: {
      type: Array,
      required: true
    },
    rangeState: {
      type: Object,
      default: () => ({
        from: null,
        to: null,
        selecting: false
      })
    },
    focusedDate: {
      type: Date,
      required: true
    }
  },
  computed: {
    dates() {
      const { selectionMode, value, rangeState } = this
      const rangeSelecting = selectionMode === 'range' && rangeState.selecting
      return rangeSelecting ? [rangeState.from] : value
    }
  },
  methods: {
    handleClick(cell) {
      if (cell.disabled || cell.type === 'weekLabel') return
      const newDate = new Date(clearHours(cell.date))

      this.$emit('pick', newDate)
      this.$emit('pick-click')
    },
    handleMouseMove(cell) {
      if (!this.rangeState.selecting) return
      if (cell.disabled) return
      const newDate = cell.date
      this.$emit('change-range', newDate)
    }
  }
}