@daysnap/horn-ui/src/hor-select-popup/README.md

hron ui

# HorSelectPopup


### 介绍
多选弹框组件

## 代码演示
### 带锚点
```html
<hor-cell
  label="请选择联系人"
  :formatter="(v) => v.map((i:any) => i.label).join(',')"
  :value="users"
  arrow
  @click="handleShowList"
></hor-cell>
<hor-select-popup ref="selectPopInstance" />
<script setup lang="ts">
  import type { HorSelectPopupInstance, SourcesItem } from '@daysnap/horn-ui'
  import { HorSelectPopup, HorCell } from '@daysnap/horn-ui'
  import { ref } from 'vue'
  const selectPopInstance = ref<HorSelectPopupInstance>()
  const users = ref<SourcesItem[]>([])
  const sources = [
    {
      anchor: 'W',
      children: Array(10)
        .fill(1)
        .map((v, i) => {
          return {
            id: i,
            name: 'W' + i,
            label: 'W' + i,
          }
        }),
    },
    {
      anchor: 'C',
      children: Array(10)
        .fill(1)
        .map((v, i) => ({
          id: i,
          name: 'CC' + i,
          label: 'CC' + i,
        })),
    },
    {
      anchor: 'F',
      children: Array(10)
        .fill(1)
        .map((v, i) => ({
          id: i,
          name: 'FF' + i,
          label: 'FF' + i,
        })),
    },
  ]
  const handleShowList = () => {
    selectPopInstance
      .value!.show({
        sources,
        modelValue: users.value.map((i) => i.name),
      })
      .then((res) => {
        users.value = res
      })
  }
</script>
```

### 不带锚点
```html
<hor-cell
  label="请选择联系人"
  :formatter="(v) => v.map((i:any) => i.label).join(',')"
  :value="users2"
  arrow
  @click="handleShowList2"
></hor-cell>
<hor-select-popup ref="selectPopInstance2" />
<script setup lang="ts">
  import type { HorSelectPopupInstance, SourcesItem } from '@daysnap/horn-ui'
  import { HorSelectPopup, HorCell } from '@daysnap/horn-ui'
  import { ref } from 'vue'
  const selectPopInstance2 = ref<HorSelectPopupInstance>()
  const users2 = ref<SourcesItem[]>([])
  const sources2 = Array(20)
    .fill(1)
    .map((v, i) => ({
      id: i,
      name: '哈哈' + i,
      label: '哈哈' + i,
    }))
  const handleShowList2 = () => {
    selectPopInstance
      .value!.show({
        sources: sources2,
        modelValue: users.value.map((i) => i.name),
      })
      .then((res) => {
        users2.value = res
      })
  }
</script>

```
## API

### 属性 Props

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