# MultipleSelect（author：张雄刚）

弹框批量拉选择组件，可默认和多选。

- 弥补了一些 antd 的多选相关组件的不足
- 使 UI 看着更协调

# 依赖 antd 相关

## 组件

- a-popover
- a-tooltip
- a-input
- a-checkbox
- a-row
- a-col

## icons

```
<down-outlined />
 <close-circle-outlined />
```

tips：使用前请确保这些 antd 组件被全局安装

# Usage

```
import { MultipleSelect } from '@kt/unity-components';

const checkedList = ref<string[]>(['']);

<multiple-select
  v-model="checkedList"
  name="label"
  :options="options"
  :allValue="''"
  :userKey="{ label: 'label', value: 'value' }"
></multiple-select>
```

# API

| 参数           | 说明                                                   | 类型                        | 默认值                             |
| -------------- | ------------------------------------------------------ | --------------------------- | ---------------------------------- |
| value(v-model) | 选择的值                                               | (string\|number)[]          | -                                  |
| name           | 组件的 label                                           | string                      | ''                                 |
| options        | 下拉选项                                               | object[]                    | []                                 |
| allValue       | 自定义"全部"选项的值                                   | string\|number              | ''                                 |
| size           | 组件大小                                               | 'large'\|'default'\|'small' | 'default'                          |
| userKey        | label 和 value 的 key 值                               | object                      | { label: 'label', value: 'value' } |
| allowClear     | 可以点击清除图标删除内容                               | boolean                     | true                               |
| showAll        | 是否要显示展示(全部)<br>有些场景下不需要显示展示(全部) | boolean                     | true                               |

# 蓝湖参考

[选择器](https://lanhuapp.com/web/#/item/project/detailDetach?tid=3e189f00-e766-420d-a5d1-e963c303b08c&pid=ff997f2c-0ea3-4901-8f3a-49f76a11e747&project_id=ff997f2c-0ea3-4901-8f3a-49f76a11e747&image_id=0e402104-e83d-40db-902f-3a9bbe6ed41c&fromEditor=true)
