@daysnap/horn-ui/src/hor-time-picker/README.md

hron ui

# HorTimePicker


### 介绍

promise风格的TimePicker,支持vant timePicker的全部props


## 代码演示

### 基础用法
```html
<hor-cell
  label="请选择时间"
  :formatter="(v) => v.join(':')"
  :value="time"
  @click="handleClick"
  arrow
></hor-cell>
<hor-time-picker ref="refTimePicker" />
<script setup lang="ts">
  import type { HorTimePickerInstance } from '@daysnap/horn-ui'
  import { HorTimePicker, HorCell } from '@daysnap/horn-ui'
  import { ref } from 'vue'
  const refTimePicker = ref<HorTimePickerInstance>()
  const time = ref<string[]>([])
  const handleClick = () => {
    refTimePicker.value
      ?.show({
        modelValue: time.value,
        title: '请选择时间',
        minHour: 18,
      })
      .then((res) => {
        time.value = res.selectedValues
      })
      .catch((err) => {
        console.log('err =>', err)
      })
  }
</script>
```

## API

### 属性 Props

<table>
  <tr>
    <td>名称</td>
    <td>类型</td>
    <td>默认值</td>
  </tr>
  <tr v-for="(item, key) in horTimePickerProps" :key="key">
    <td>{{ key }}</td>
    <td>{{ parseType(item.type || item) }}</td>
    <td>{{ reserve(item.default, '-') }}</td>
  </tr>
</table>

<table>
  <tr>
    <td>名称</td>
    <td>说明</td>
  </tr>
  <tr>
    <td>xx</td>
    <td>xxx</td>
  </tr>
</table>

### 插槽 Slots

<table>
  <tr>
    <td>名称</td>
    <td>说明</td>
  </tr>
  <tr>
    <td>xx</td>
    <td>xxx</td>
  </tr>
</table>


### 实例方法

<table>
  <tr>
    <td>名称</td>
    <td>说明</td>
  </tr>
  <tr>
    <td>xx</td>
    <td>xxx</td>
  </tr>
</table>



<script setup lang="ts">
  import { reserve } from '@daysnap/utils'
  import { HorCell } from '../hor-cell'
  import { HorTimePicker, horTimePickerProps } from '.'
  import { parseType } from '../utils'
</script>