# HorCascadePopup


### 介绍

支持搜索的级联选择器,应用场景:级联的单选

## 代码演示


### 基础用法

```html
<hor-cell label="联系人" arrow @click="() => handleClick()" :value="computedNames"></hor-cell>
<hor-cascade-popup :options="options" title="请选择联系人" ref="cascade" />
<script setup lang="ts">
    const names = ref([])
    const cascade = ref()
    const handleClick = async function () {
      try {
        names.value = (await cascade.value?.show())?.map((i) => i.label)
      } catch (err) {
        console.log('err =>', err)
      }
    }
</script>
```
### option类型

```html
type OptionItem = {
  label: string
  value: Numeric
}
type AnchorOptionItem = {
  anchor: string
  children: OptionItem[]
}
```
### 带索引栏

```html
<hor-cell
  label="支持搜索支持级联"
  arrow
  @click="() => handleClick2()"
  :value="computedNames"
></hor-cell>
<hor-cascade-popup title="支持promise" ref="cascade2" />
<script setup lang="ts">
  const names = ref<any>([])
  const cascade2 = ref<HorCascadePopupInstance>()
  const options3 = (pre?: OptionItem) => {
    console.log('pre =>', pre)
    return new Promise<CascadeOptions>((res, _) => {
      const loading = showLoadingToast({
        message: '加载中...',
        forbidClick: true,
        duration: 0,
      })
      setTimeout(() => {
        loading.close()
        res(ANCHOR_LIST)
      }, 1500)
    })
  }
  const handleClick2 = async function () {
    try {
      names.value = (
        await cascade2.value?.show({
          title: '支持搜索',
          search: true,
          options: options3,
          next: {
            title: '二级',
            search: true,
            options: options3,
          },
        })
      )?.map((i) => i.label)
    } catch (err) {
      console.log('err =>', err)
    }
  }
</script>
```
## API

### 属性 Props

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