自定义夜班时间选择器(基于elementUI)

代码背景:

在一次项目过程中,有个需求是:需要选择"夜班"的时间(19:00~07:00)，由于时间已经跨了一天，所以没有现成的组件可以使用，于是自己动手，结合el-select写了一个“夜班”时间选择器。

nightshiftSelcet.vue

<!--
 * @创建文件时间: 2021-07-16 15:58:04
 * @Auther: 猿小天
 * @最后修改人: 猿小天
 * @最后修改时间: 2021-07-19 11:17:59
 * 联系Qq:1638245306
 * @文件介绍: 夜班时间选择器
-->
<template>
  <el-select
    :size="size"
    v-bind:value="value"
    v-on:change="$emit('change', $event)"
    :placeholder="placeholder"
    prefix="el-icon-search"
    :picker-options="pickerOptions"
  >
    <el-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value"
      :disabled="item.disabled"
    >
    </el-option>
    <template slot="prefix">
      <i class="el-icon-time" style="margin-left: 5px"></i>
    </template>
  </el-select>
</template>
<script>
export default {
  model: {
    prop: 'value',
    event: 'change',
  },
  props: {
    value: {
      type: String,
      default: '',
    },
    size: {
      type: String,
      default: 'medium',
    },
    placeholder: {
      type: String,
      default: '请选择',
    },
    pickerOptions: {
      type: Object,
      default() {
        return {
          minTime: '',
          maxTime: '',
        }
      },
    },
  },
  data() {
    return {
      options: [],
    }
  },
  methods: {
    initData() {
      let minTime = this.pickerOptions.minTime //最小可选时间

      const hours = ['19', '20', '21', '22', '23', '00', '01', '02', '03', '04', '05', '06', '07']
      const minute = ['00', '05', '10', '15', '20', '25', '30', '35', '40', '45', '50', '55']
      let ret = []
      for (let item of hours) {
        let h_m = ''
        if (hours.lastIndexOf(item) === hours.length - 1) {
          h_m = item + ':00'

          let dict = {
            label: h_m,
            value: h_m,
            disabled: false,
          }
          ret.push(dict)
        } else {
          for (let key of minute) {
            h_m = item + ':' + key

            let dict = {
              label: h_m,
              value: h_m,
              disabled: false,
            }
            ret.push(dict)
          }
        }
      }
      let minTime_index = ret.findIndex((item) => {
        return item.label === minTime
      })

      ret.forEach((item, index) => {
        if (index < minTime_index + 1) {
          item.disabled = true
        }
      })

      this.options = ret
    },
  },
  created() {
    this.initData()
  },
}
</script>

使用方式：

 <nightshiftSelcet
      style="width: 128px"
       size="small"
       v-model="item.endTime"
       :pickerOptions="{ minTime: item.startTime }"
     ></nightshiftSelcet>

截图: