el-time-select详解

el-time-select 是 Element Plus 框架中的时间选择器组件，用于让用户从预设的时间段中选择一个时间。它适用于需要从固定时间段中选择时间的场景。

el-time-select 属性详解

1. model-value / v-model:

   • 类型: String | Date
   • 用途: 绑定的值，表示当前选中的时间。
   • 默认值: —

2. placeholder:

   • 类型: String
   • 用途: 输入框占位符。
   • 默认值: 请选择时间

3. start:

   • 类型: String
   • 用途: 时间选择器的开始时间。
   • 默认值: 00:00

4. end:

   • 类型: String
   • 用途: 时间选择器的结束时间。
   • 默认值: 23:59

5. step:

   • 类型: String
   • 用途: 时间选择器的时间间隔。
   • 默认值: 00:30

6. min-time:

   • 类型: String
   • 用途: 当前时间之前的最小可选时间。
   • 默认值: —

7. max-time:

   • 类型: String
   • 用途: 当前时间之后的最大可选时间。
   • 默认值: —

8. readonly:

   • 类型: Boolean
   • 用途: 是否只读。
   • 默认值: false

9. disabled:

   • 类型: Boolean
   • 用途: 是否禁用。
   • 默认值: false

10. editable:

    • 类型: Boolean
    • 用途: 是否可以编辑输入框。
    • 默认值: true

11. clearable:

    • 类型: Boolean
    • 用途: 是否显示清除按钮。
    • 默认值: true

12. size:

    • 类型: String
    • 用途: 输入框尺寸，可选值为 large、default、small。
    • 默认值: default

13. prefix-icon:

    • 类型: String
    • 用途: 输入框前缀图标。
    • 默认值: el-icon-time

14. clear-icon:

    • 类型: String
    • 用途: 清除按钮图标。
    • 默认值: el-icon-circle-close

15. validate-event:

    • 类型: Boolean
    • 用途: 是否在值改变时触发校验。
    • 默认值: true

el-time-select 事件详解

1. change:

   • 类型: Function
   • 用途: 时间值变化时触发。
   • 参数: value（当前选中的时间）

2. focus:

   • 类型: Function
   • 用途: 输入框获得焦点时触发。
   • 参数: event（事件对象）

3. blur:

   • 类型: Function
   • 用途: 输入框失去焦点时触发。
   • 参数: event（事件对象）

4. visible-change:

   • 类型: Function
   • 用途: 弹出框显示或隐藏时触发。
   • 参数: visible（布尔值，表示是否显示）

el-time-select 插槽详解

1. default:

   • 插槽名称: default
   • 用途: 自定义输入框的内容。

完整示例代码

<template>
  <div>
    <h2>Time Select 示例</h2>

    <!-- 基本用法 -->
    <el-time-select v-model="time1" placeholder="选择时间"></el-time-select>

    <!-- 自定义开始和结束时间 -->
    <el-time-select v-model="time2" placeholder="选择时间" :start="startTime" :end="endTime" :step="timeStep"></el-time-select>

    <!-- 禁用 -->
    <el-time-select v-model="time3" placeholder="选择时间" disabled></el-time-select>

    <!-- 不可编辑 -->
    <el-time-select v-model="time4" placeholder="选择时间" editable="false"></el-time-select>

    <!-- 不显示清除按钮 -->
    <el-time-select v-model="time5" placeholder="选择时间" clearable="false"></el-time-select>

    <!-- 自定义格式 -->
    <el-time-select v-model="time6" placeholder="选择时间" format="HH:mm"></el-time-select>

    <!-- 自定义输入框内容 -->
    <el-time-select v-model="time7" placeholder="选择时间">
      <template #default>
        <span>{{ time7 ? formatTime(time7) : '请选择时间' }}</span>
      </template>
    </el-time-select>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { formatDate } from 'element-plus'

const time1 = ref('')
const time2 = ref('')
const time3 = ref('')
const time4 = ref('')
const time5 = ref('')
const time6 = ref('')
const time7 = ref('')

const startTime = '08:00'
const endTime = '18:00'
const timeStep = '01:00'

const formatTime = (time) => {
  return formatDate(time, 'HH:mm')
}
</script>

代码解释

1. 基本用法:

   • 使用 el-time-select 组件并设置 v-model 绑定时间值。

   • <el-time-select v-model="time1" placeholder="选择时间"></el-time-select>
     

2. 自定义开始和结束时间:

   • 使用 start、end 和 step 属性自定义时间选择器的开始时间、结束时间和时间间隔。

   • <el-time-select v-model="time2" placeholder="选择时间" :start="startTime" :end="endTime" :step="timeStep"></el-time-select>
     

3. 禁用:

   • 使用 disabled 属性禁用时间选择器。

   • <el-time-select v-model="time3" placeholder="选择时间" disabled></el-time-select>
     

4. 不可编辑:

   • 使用 editable 属性设置输入框不可编辑。

   • <el-time-select v-model="time4" placeholder="选择时间" editable="false"></el-time-select>
     

5. 不显示清除按钮:

   • 使用 clearable 属性设置不显示清除按钮。

   • <el-time-select v-model="time5" placeholder="选择时间" clearable="false"></el-time-select>
     

6. 自定义格式:

   • 使用 format 属性设置输入框的显示格式。

   • <el-time-select v-model="time6" placeholder="选择时间" format="HH:mm"></el-time-select>
     

7. 自定义输入框内容:

   • 使用默认插槽自定义输入框的内容。

   • <el-time-select v-model="time7" placeholder="选择时间">
       <template #default>
         <span>{{ time7 ? formatTime(time7) : '请选择时间' }}</span>
       </template>
     </el-time-select>