Skip to content

Time pickers(时间选择器) ​

v-time-picker是一个独立的组件,可以在许多现有的 Vuetify 组件中使用。它为用户提供了选择时间的可视化表示。

WARNING

此功能需要 v3.5.12 版本。

Installation (安装) ​

实验室组件需要手动导入和安装该组件。

js
import { VTimePicker } from "vuetify/labs/VTimePicker";

export default createVuetify({
  components: {
    VTimePicker,
  },
});

Usage (使用) ​

时间选择器默认情况下启用了浅色主题。

API ​

组件描述
v-time-picker主要组件

Examples (示例) ​

Props (属性) ​

Allowed times (允许的时间) ​

您可以使用数组、对象和函数指定允许的时间。您还可以指定时间 step/precision/interval(步长/精度/间隔)-例如 10 分钟。

Colors (颜色) ​

时间选择器的颜色可以使用 color和header-color 道具来设置。如果header-color prop 没有提供,header 将使用color prop 值。

Disabled (禁用) ​

您无法使用已禁用的选择器。

Elevation(海拔) ​

通过提供从 0 到 24 的 elevation (高度)来强调 v-time-picker(时间选择器组件)。Elevation 修改 box-shadow css 属性。

Format (格式化) ​

时间选择器可以切换到 24 小时格式。请注意,format(格式)prop 只定义了选择器的显示方式,选择器的值(model)始终是 24 小时格式。

No header ​

你可以移除 picker 的头部。

Range (范围) ​

这是一个用 min 和 max props 合并选择器的例子。

Read-only (只读) ​

只读选择器的行为与禁用的一样,但看起来像默认的。

Scrollable (可滚动) ​

您可以使用鼠标滚轮编辑时间选择器的值。

Use seconds (秒数) ​

时间选择器可以输入秒数。

Misc (其他) ​

Dialog and menu (对话框和菜单) ​

由于选择器的灵活性,您可以真正按照自己的意愿进行输入。