TimePicker 时间选择

示例

三种模式

支持三种模式，分别是 hour、minute 和 second，可以通过 mode 属性来控制。

Hour mode

Minute mode

Second mode

<template>
<article>
  <section>
    <h4>Hour mode</h4>
    <veui-time-picker mode="hour"/>
  </section>
  <section>
    <h4>Minute mode</h4>
    <veui-time-picker
      v-model="value"
      mode="minute"
    />
  </section>
  <section>
    <h4>Second mode</h4>
    <veui-time-picker
      v-model="value"
      mode="second"
    />
  </section>
</article>
</template>

<script>
import { TimePicker } from 'veui'

export default {
  components: {
    'veui-time-picker': TimePicker
  },
  data () {
    return {
      value: null
    }
  }
}
</script>

<style lang="less" scoped>
section {
  margin-bottom: 20px;
}

h4 {
  margin-top: 0;
}
</style>

定制时间选项

支持定制时间选项，分别可以通过 hours、minutes 和 seconds 来定制对应的时间选项。

在 GitHub 上编辑此示例编辑

<template>
<article>
  <veui-time-picker
    class="time-picker"
    mode="hour"
    :hours="[2, 4, 6, 8, 10, 12, 14, 16]"
  />
  <veui-time-picker
    class="time-picker"
    mode="minute"
    :hours="[2, 4, 6, 8, 10, 12, 14, 16]"
    :minutes="[0, 10, 20, 30, 40, 50]"
  />
  <veui-time-picker
    class="time-picker"
    mode="second"
    :hours="[2, 4, 6, 8, 10, 12, 14, 16]"
    :minutes="[0, 10, 20, 30, 40, 50]"
    :seconds="[0, 10, 20, 30, 40, 50]"
  />
</article>
</template>

<script>
import { TimePicker } from 'veui'

export default {
  components: {
    'veui-time-picker': TimePicker
  }
}
</script>

<style lang="less" scoped>
.time-picker {
  & + & {
    margin-left: 20px;
  }
}
</style>

范围限制

支持范围限制，可以通过 min 和 max 来分别设置最小值和最大值。

在 GitHub 上编辑此示例编辑

<template>
<article>
  <veui-time-picker
    v-model="min"
    :max="max"
  />
  ~
  <veui-time-picker
    v-model="max"
    :min="min"
  />
</article>
</template>

<script>
import { TimePicker } from 'veui'

export default {
  components: {
    'veui-time-picker': TimePicker
  },
  data () {
    return {
      min: null,
      max: null
    }
  }
}
</script>

API

属性

名称类型默认值描述

ui

string

预设样式。为空格分隔的一组枚举值的组合。

值	描述
`xs`	超小尺寸样式。
`s`	小尺寸样式。
`m`	中尺寸样式。
`l`	大尺寸样式。

mode string 'second' 指定选择的粒度，分别精确到时（hour）、分（minute）、秒（second）。

value

string

v-model

当前选中的值。

placeholder string timepicker.placeholder 未选择时的占位文本。

hours Array<number> - 小时选项，默认 0-23。

minutes Array<number> - 分钟选项，默认 0-59。

seconds Array<number> - 秒钟选项，默认 0-59。

min string - 最小值限制。

max string - 最大值限制。

autofocus boolean false 是否自动获得焦点。

clearable boolean false 已选值是否可以清除。

expanded

boolean

false

.sync

下拉浮层是否展开。

disabled boolean false 是否为禁用状态。

readonly boolean false 是否为只读状态。

overlay-class string | Array | Object - 参考 Overlay 组件的 overlay-class 属性。

overlay-style string | Array | Object - 参考 Overlay 组件的 overlay-style 属性。

插槽

名称描述

option

下拉面板中的时间选项插槽。

名称	类型	描述
`label`	`string`	用来显示的文字描述。
`value`	`string`	实际对应的值。
`disabled`	`boolean`	是否禁用。
`part`	`string`	该选项是哪个部分，分别是 `hour` / `minute` / `second`。

事件

名称	描述
`input`	`v-model` 当手动输入或下拉面板中选值会触发该事件，参数是当前输入值。
`change`	若当前选中的值发生变化，在时间选择下拉面板关闭时会触发该事件，参数是当前选中值。
`toggle`	下拉浮层展开状态切换时触发，回调参数为 `(expanded: boolean)`。`expanded` 表示操作将触发下拉浮层展开还是收起。
`clear`	清除当前选中的值。

全局配置

配置项	类型	默认值	描述
`timepicker.placeholder`	`string`	`@@timepickerpicker.placeholder`	未选择时的占位文本。

@@ 开头的值表示引用多语言配置中的相应字段。

图标

名称	描述
`clock`	时钟。
`clear`	清除内容。

自定义样式

名称	类型	默认值	描述
`--dls-dropdown-max-display-items`	`<integer>`	`8`	下拉选项同时显示的最大项目数，下拉框的最大高度将由此计算得出。需要通过 `overlay-style` 属性来设置。

在 GitHub 上编辑此页面编辑