时间选择 TimePicker/TimeSelect

基本用法-TimePicker

基本用法

时间初始化。值改变事件

<title>基本用法</title>
<describe>时间初始化。值改变事件</describe>
<template>
   <hc-time-picker
    v-model="time"
    placeholder="请选择时间"
    style="width: 200px;"
    @change="handleChange"
     format="HH:mm:ss"
    ></hc-time-picker>
</template>
<script>
export default {
  props: ['slot-key'],
  data: function () {
    return {
      time: new Date()
    }
  },
  methods: {
    handleChange: function(e) {
      console.log(e)
    }
  }
}
</script>

固定时间点-TimeSelect

固定时间点

提供几个固定的时间点供用户选择

<title>固定时间点</title>
<describe>提供几个固定的时间点供用户选择</describe>
<template>
   <hc-time-select
    v-model="time"
    placeholder="请选择时间"
    style="width: 200px;"
    :picker-options="pickerOptions"
    @change="handleChange"
    ></hc-time-picker>
</template>
<script>
export default {
  props: ['slot-key'],
  data: function () {
    return {
      time: '',
      pickerOptions: {
        start: '09:00',
      	end: '18:00',
      	step: '00:30'
      }
    }
  },
  methods: {
    handleChange: function(e) {
      console.log(e)
    }
  }
}
</script>

属性及事件

HcTimePicker 属性

属性	说明	类型	可选值	默认值
value	当前输入的值，可配合v-model使用	string	date	--
placeholder	为空提示	string	--	--
format	格式化	string	HH:mm:ss, HH:mm, mm:ss	HH:mm:ss
clearable	允许清空，开启后可以一键清空选择值	boolean	--	true
viewable	是否查看状态	boolean	--	false
disabled	是否禁用	boolean	--	false
width	组件宽度	string	百分比或者具体宽度	100%

HcTimePicker 事件

事件名	说明	参数
change	值改变事件	event.value：当前输入值

HcTimeSelect 属性

属性	说明	类型	可选值	默认值
value	当前输入的值，可配合v-model使用	string	date	--
placeholder	为空提示	string	--	--
clearable	允许清空，开启后可以一键清空选择值	boolean	--	true
picker-options	固定时间配置	Object	--	{start: '09:00',end: '18:00',step: '00:30'}
width	组件宽度	string	百分比或者具体宽度	100%

HcTimeSelect 属性pickerOptions详解

属性	说明	类型	可选值	默认值
start	开始时间	string	--	09:00
end	结束时间	string	--	18:00
step	间隔时间	string	--	00:30

HcTimeSelect 事件

事件名	说明	参数
change	值改变事件	event.value：当前输入值

• 基本用法-TimePicker
• 固定时间点-TimeSelect
• 属性及事件
  • HcTimePicker 属性
  • HcTimePicker 事件
  • HcTimeSelect 属性
  • HcTimeSelect 属性pickerOptions详解
  • HcTimeSelect 事件

登录