时间选择 TimePicker

选择时间的用户界面控件，提供了一个直观的方式让用户通过滑动列表来选择特定的时间。

基础用法

时间选择器的基础用法，通过 v-model 绑定时间值，clearable 属性可清空。

<template>
  <bp-time-picker v-model="time" :style="{ width: '180px' }" clearable placeholder="请选择" />
</template>

<script setup lang="ts">
import { ref } from "vue";

const time = ref("");
</script>

尺寸

通过 size 属性设置尺寸，支持 mini、small、default、large。

mini

small

default

large

<template>
  <div style="display: flex; gap: 40px; align-items: flex-end">
    <div>
      <div class="label">mini</div>
      <bp-time-picker v-model="val" size="mini" style="width: 140px" placeholder="请选择" />
    </div>
    <div>
      <div class="label">small</div>
      <bp-time-picker v-model="val" size="small" style="width: 160px" placeholder="请选择" />
    </div>
    <div>
      <div class="label">default</div>
      <bp-time-picker v-model="val" style="width: 180px" placeholder="请选择" />
    </div>
    <div>
      <div class="label">large</div>
      <bp-time-picker v-model="val" size="large" style="width: 200px" placeholder="请选择" />
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";

const val = ref("");
</script>

<style scoped>
.label {
  font-size: 13px;
  color: #86909c;
  margin-bottom: 6px;
}
</style>

可清空与禁用

clearable 允许清空，disabled 禁用选择器。

可清空

禁用

<template>
  <div style="display: flex; gap: 40px">
    <div>
      <div class="label">可清空</div>
      <bp-time-picker v-model="val" clearable style="width: 180px" placeholder="请选择" />
    </div>
    <div>
      <div class="label">禁用</div>
      <bp-time-picker v-model="val2" disabled style="width: 180px" />
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";

const val = ref("");
const val2 = ref("14:30:00");
</script>

<style scoped>
.label {
  font-size: 13px;
  color: #86909c;
  margin-bottom: 6px;
}
</style>

TimePicker 属性

v-model	绑定值	String	-	-
name	输入框名称	String	-	-
placeholder	占位文本	String	-	-
size	尺寸	InputSize	default	-
disabled	是否禁用	Boolean	-	-
clearable	是否可清空	Boolean	-	-
value-format	值格式	String	YYYY-MM-DD	-
hide-trigger	是否隐藏触发器	Boolean	-	-

TimePicker 事件

input	输入触发	-	-
blur	失焦触发	-	-