vue3 el-time-picker 可以随便选

Vue 3中的`el-time-picker`是Element Plus（Element UI的Vue 3版本）提供的一个组件，它允许用户选择时间。如果你希望用户能够随意选择时间，你可以使用`el-time-picker`的`picker-options`属性来自定义时间选择器的行为。通过配置`picker-options`中的`disabledHours`和`disabledMinutes`方法，可以禁用特定的小时或分钟，从而实现非固定时间范围的选择。

例如，你可以设置一个时间选择器，允许用户选择任意时间，但不能选择上午10点到下午2点之间的时间。代码示例如下：

<template>
  <el-time-picker
    v-model="value"
    :picker-options="pickerOptions"
    format="HH:mm"
    value-format="HH:mm"
    placeholder="选择时间">
  </el-time-picker>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    const value = ref('');
    const pickerOptions = {
      disabledHours() {
        return [10, 11, 12, 13, 14, 15, 16, 17, 18, 19];
      },
      disabledMinutes(time) {
        // 在允许选择的小时段内，任意分钟都可以选择
        const hour = time.hour();
        if (hour === 10) {
          return [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35, 36, 37, 38, 39, 40, 41, 42, 43, 44, 45, 46, 47, 48, 49, 50, 51, 52, 53, 54, 55, 56, 57, 58, 59];
        }
        // 在其他时间允许任意分钟选择
        return [];
      },
    };

    return {
      value,
      pickerOptions,
    };
  }
};
</script>

在这个例子中，`disabledHours`方法返回了一个包含10到19的数组，表示用户不能选择上午10点到下午2点之间的小时数。`disabledMinutes`方法根据当前选中的小时动态返回一个数组，表示在10点整点不能选择任何分钟，而在其他时间点用户可以选择任意分钟。