TimePicker 时间选择

示例

三种模式

支持三种模式,分别是 hourminutesecond,可以通过 mode 属性来控制。

Hour mode

请选择时间

Minute mode

请选择时间

Second mode

请选择时间
在 GitHub 上编辑此页编辑
<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>

定制时间选项

支持定制时间选项,分别可以通过 hoursminutesseconds 来定制对应的时间选项。

请选择时间
请选择时间
请选择时间
在 GitHub 上编辑此页编辑
<template>
<article>
  <veui-time-picker
    mode="hour"
    :hours="[2, 4, 6, 8, 10, 12, 14, 16]"
  />
  <veui-time-picker
    mode="minute"
    :hours="[2, 4, 6, 8, 10, 12, 14, 16]"
    :minutes="[0, 10, 20, 30, 40, 50]"
  />
  <veui-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>
.veui-time-picker {
  & + & {
    margin-left: 20px;
  }
}
</style>

范围限制

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

请选择时间
~
请选择时间
在 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

属性

名称类型默认值描述
uistring=-

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

描述
s小尺寸样式。
m中尺寸样式。
modestring'second'指定选择的粒度,分别精确到时(hour)、分(minute)、秒(second)。
valuestring

v-model

当前选中的值。

placeholderstringtimepicker.placeholder未选择时的占位文本。
hoursArray<number>-小时选项,默认 0-23。
minutesArray<number>-分钟选项,默认 0-59。
secondsArray<number>-秒钟选项,默认 0-59。
minstring-最小值限制。
maxstring-最大值限制。
autofocusbooleanfalse是否自动获得焦点。
clearablebooleanfalse已选值是否可以清除。
expandedboolean=false

.sync

下拉浮层是否展开。

disabledboolean=false是否为禁用状态。
readonlyboolean=false是否为只读状态。

插槽

名称描述
option

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

名称类型描述
labelstring用来显示的文字描述。
valuestring实际对应的值。
disabledboolean=是否禁用。
partstring该选项是哪个部分,分别是 hour / minute / second

事件

名称描述
input

v-model

当手动输入或下拉面板中选值会触发该事件,参数是当前输入值。

change若当前选中的值发生变化,在时间选择下拉面板关闭时会触发该事件,参数是当前选中值。
toggle下拉浮层展开状态切换时触发,回调参数为 (expanded: boolean)expanded 表示操作将触发下拉浮层展开还是收起。
clear清除当前选中的值。

全局配置

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

图标

名称描述
clock时钟。
clear清除内容。
在 GitHub 上编辑此页编辑