Honeycomb Design

# 时间选择 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：当前输入值

← 范围选择 RangePicker →