element-plus el-time-picker 时间选择器 选择时间范围 限制只能选择当前时间到前24小时

Element Plus的`el-time-picker`是一个用于选择日期和时间的组件。如果你想要限制用户只能选择当前时间到前24小时的时间范围，可以利用它的API和自定义事件来实现。以下是一个简化的步骤：

1. 首先，在`el-time-picker`的`v-model`上绑定一个数据对象，比如`selectedRange`，初始值设置为包含当前时间和过去24小时的时间段。

<template>
  <el-time-picker v-model="selectedRange" :picker-options="{startPicker: 'minute', endPicker: 'minute'}"></el-time-picker>
</template>

<script>
export default {
  data() {
    return {
      selectedRange: { start: new Date(), end: addHours(new Date(), -24) }, // 设置初始范围
    };
  },
  methods: {
    addHours(date, hours) {
      return new Date(date.setHours(date.getHours() + hours));
    }
  },
};
</script>

2. 然后，你需要阻止`el-time-picker`默认的行为，当用户尝试超出指定范围时。可以在`pickerChange`事件中检查新选择的时间，并在不符合条件时清除选择：

methods: {
  pickerChange(range) {
    if (range.start > range.end || range.start < this.selectedRange.start) {
      this.$emit('input', this.selectedRange); // 如果超出范围，恢复到原始范围
    } else {
      this.selectedRange = range; // 否则更新新的范围
    }
  },
},

在这个例子中，当你触发`pickerChange`时，如果用户选择了超过前一天的时间，你会看到默认范围自动恢复到前24小时。