TimePicker 时间选择器

基础用法

<template>
  <div>
    <plv-time-picker v-model="time" />
  </div>
</template>

<script>
  export default {
    data() {
      return {
        time: ''
      };
    }
  };
</script>

显示代码

精度

<template>
  <div style="display: flex;align-items: center;">
    <plv-time-picker v-model="time1"></plv-time-picker>
    <plv-time-picker v-model="time2" precision="minute"></plv-time-picker>
    <plv-time-picker v-model="time3" precision="hour"></plv-time-picker>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        time1: '',
        time2: '',
        time3: ''
      };
    }
  };
</script>

显示代码

Time Format

format、valueForma 进行相关的格式定义。以下以UTC 03:04:05 为例：

格式	说明	举例
H	小时，24小时制，不补0	3
HH	小时，24小时制	03
h	小时，12小时制，须和 A 或 a 使用，不补0	3
hh	小时，12小时制，须和 A 或 a 使用	03
m	分钟，不补0	4
mm	分钟	04
s	秒，不补0	5
ss	秒	05

Attributes

参数	说明	类型	可选值	默认值
value / v-model	绑定值	Date String	-	-
readonly	是否只读	Boolean	-	false
disabled	是否禁用	Boolean	-	false
clearable	是否显示清除按钮	Boolean	-	false
size	尺寸	String	medium small mini	-
placeholder	占位符	String	-	请选择
format	显示在输入框的格式	String	见时间格式	HH:mm:ss
valueFormat	绑定值的格式，不指定则为 Date 对象	String	见时间格式	-
precision	时间精度	String	hour minute second	second
disabledTime	设置时间的禁用状态	Function	-	-
seatDate	当不指定valueFormat时，绑定值对应的年月日	Date	-	今天的日期
input-options	额外给输入框组件的参数	Object	-	-
prefix-icon	输入框前缀图标	String	-	-
suffix-icon	输入框后缀图标	String	-	-

Events

事件名称	说明	回调参数
change	绑定值修改时触发	最新的值
open	在选择器打开时触发	-
close	在选择器关闭时触发	-