el-time-picker详解

el-time-picker 是 Element Plus 框架中的时间选择器组件，用于让用户选择具体的时间。它可以用于表单、日程安排等多种场景。

el-time-picker 属性详解

1. model-value / v-model:

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

2. is-range:

   • 类型: Boolean
   • 用途: 是否为时间范围选择器。
   • 默认值: false

3. placeholder:

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

4. start-placeholder:

   • 类型: String
   • 用途: 开始时间的占位符（仅在 is-range 为 true 时有效）。
   • 默认值: 请选择开始时间

5. end-placeholder:

   • 类型: String
   • 用途: 结束时间的占位符（仅在 is-range 为 true 时有效）。
   • 默认值: 请选择结束时间

6. readonly:

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

7. disabled:

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

8. editable:

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

9. clearable:

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

10. size:

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

11. arrow-control:

    • 类型: Boolean
    • 用途: 是否使用箭头控制时间选择。
    • 默认值: false

12. value-format:

    • 类型: String
    • 用途: 绑定值的格式。
    • 默认值: —

13. format:

    • 类型: String
    • 用途: 输入框的显示格式。
    • 默认值: HH:mm:ss

14. align:

    • 类型: String
    • 用途: 输入框对齐方式，可选值为 left、center、right。
    • 默认值: left

15. prefix-icon:

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

16. clear-icon:

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

17. range-separator:

    • 类型: String
    • 用途: 时间范围分隔符（仅在 is-range 为 true 时有效）。
    • 默认值: -

18. popper-class:

    • 类型: String
    • 用途: 弹出框的类名。
    • 默认值: —

19. validate-event:

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

el-time-picker 事件详解

1. change:

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

2. focus:

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

3. blur:

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

4. visible-change:

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

el-time-picker 插槽详解

1. default:

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

完整示例代码

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

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

    <!-- 时间范围选择 -->
    <el-time-picker v-model="timeRange1" is-range placeholder="选择时间范围" start-placeholder="开始时间" end-placeholder="结束时间"></el-time-picker>

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

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

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

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

    <!-- 使用箭头控制时间选择 -->
    <el-time-picker v-model="time6" placeholder="选择时间" arrow-control></el-time-picker>

    <!-- 自定义输入框内容 -->
    <el-time-picker v-model="time7" placeholder="选择时间">
      <template #default>
        <span>{{ time7 ? formatTime(time7) : '请选择时间' }}</span>
      </template>
    </el-time-picker>
  </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 timeRange1 = ref('')

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

代码解释

1. 基本用法:

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

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

2. 时间范围选择:

   • 使用 is-range 属性启用时间范围选择，并设置 start-placeholder 和 end-placeholder。

   • <el-time-picker v-model="timeRange1" is-range placeholder="选择时间范围" start-placeholder="开始时间" end-placeholder="结束时间"></el-time-picker>
     

3. 禁用:

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

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

4. 不可编辑:

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

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

5. 不显示清除按钮:

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

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

6. 自定义格式:

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

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

7. 使用箭头控制时间选择:

   • 使用 arrow-control 属性启用箭头控制时间选择。

   • <el-time-picker v-model="time6" placeholder="选择时间" arrow-control></el-time-picker>
     

8. 自定义输入框内容:

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

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