跟随 Element 学习 Vue 小技巧 (17)：TimePicker

2023-12-26 23:26:31

时间是无情而无形的。它飞快流逝，在身后留下或好或坏的回忆。有谁不曾回首往事，憧憬着回到某个时间点，让一切重来？有谁不曾经历过时间的洗礼，在岁月的磨砺中成长？

在 Vue 生态系统中，Element UI 提供了一个强大的组件，名为 TimePicker，它允许我们轻松地选择时间和日期。这个组件提供了多种自定义选项，使我们能够创建美观且实用的时间选择器。

让我们深入了解 TimePicker 组件：

基础用法： <el-time-picker> 组件接受一个 value 属性，用于设置或获取所选的时间和日期。
时间格式化： 我们可以使用 format 属性自定义显示的时间格式。
尺寸和外观： size 属性允许我们控制组件的大小，而 placeholder 属性则可以添加一个提示文本。
日期范围： range-picker 属性使我们能够选择日期范围，而 start-placeholder 和 end-placeholder 属性则允许我们设置占位符文本。
时分秒选择器： picker-options 属性提供了对时、分和秒选择器外观和功能的细粒度控制。
禁用时间： 我们可以使用 disabled-hours 和 disabled-minutes 属性禁用特定时间或分钟。
事件： TimePicker 组件支持各种事件，例如 change 和 blur，允许我们根据用户的交互执行操作。

代码示例：

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

<script>
import { ref } from 'vue'

export default {
  setup() {
    const time = ref(null)
    return { time }
  },
}
</script>