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

hron ui

# HorPicker


### 介绍

promise 风格的picker暂未支持v-model


## 代码演示
### 基础用法
```html
<hor-cell required label="请选择城市" :value="result" @click="handleOpen" arrow />
<hor-cell required label="请选择城市2" :value="result2" @click="handleOpen2" arrow />
<hor-picker :filterable="true" ref="horPickerInstance" />
<script setup lang="ts">
  import { HorCell, HorPicker } from '@daysnap/horn-ui'
  import type { HorPickerInstance } from '@daysnap/horn-ui'
  import { ref } from 'vue'

  const horPickerInstance = ref<HorPickerInstance>()
  const result = ref()
  const handleOpen = async () => {
    await horPickerInstance.value
      ?.show({
        columns: [
          {
            text: '浙江',
            value: 'Zhejiang',
            children: [
              {
                text: '杭州',
                value: 'Hangzhou',
                children: [
                  { text: '西湖区', value: 'Xihu' },
                  { text: '余杭区', value: 'Yuhang' },
                ],
              },
              {
                text: '温州',
                value: 'Wenzhou',
                children: [
                  { text: '鹿城区', value: 'Lucheng' },
                  { text: '瓯海区', value: 'Ouhai' },
                ],
              },
            ],
          },
          {
            text: '福建',
            value: 'Fujian',
            children: [
              {
                text: '福州',
                value: 'Fuzhou',
                children: [
                  { text: '鼓楼区', value: 'Gulou' },
                  { text: '台江区', value: 'Taijiang' },
                ],
              },
            ],
          },
        ],
      })
      .then((res) => {
        result.value = res.selectedValues
      })
  }
  const result2 = ref()
  const handleOpen2 = async () => {
    await horPickerInstance.value
      ?.show({
        columns: [{ text: '西湖区' }, { text: '余杭区' }],
      })
      .then((res) => {
        console.log('res =>', res)
        result2.value = res.selectedValues
      })
  }
</script>
```

## API

### 属性 Props

<table>
  <tr>
    <td>名称</td>
    <td>类型</td>
    <td>默认值</td>
  </tr>
  <tr v-for="(item, key) in horPickerProps" :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 { HorPicker, horPickerProps } from '.'
  import { parseType } from '../utils'
</script>