# zent-select

> Zent Select组件

Latest version **1.1.0** (published 2017-04-24) · MIT license · 0 weekly downloads

## Install

```sh
npm install zent-select
pnpm add zent-select
yarn add zent-select
bun add zent-select
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.1.0 |
| Published | 2017-04-24 |
| First published | 2017-02-10 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 1 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 2249 |
| Author | youzan |
| Maintainers | youzan-lc |

## Links

- npm: https://www.npmjs.com/package/zent-select
- Repository: https://github.com/youzan/zent
- Homepage: https://github.com/youzan/zent#readme
- Issues: https://github.com/youzan/zent/issues
- npm.io page: https://npm.io/package/zent-select

## Dependencies (1)

- [zent-utils](https://npm.io/package/zent-utils.md) 1.1.0

## Recent versions

- 1.1.0 (latest) — 2017-04-24
- 1.1.0-beta4 (beta) — 2017-04-19
- 1.0.14 — 2017-04-13
- 1.0.13 — 2017-04-13
- 1.0.12 — 2017-04-11
- 1.0.11 — 2017-04-10
- 1.0.10 — 2017-03-31
- 1.0.9 — 2017-03-22
- 1.0.8 — 2017-03-14
- 1.0.7 — 2017-03-08
- 1.0.7-beta2 — 2017-03-02
- 1.0.7-beta1 — 2017-02-27
- 1.0.6 — 2017-02-17
- 1.0.5 — 2017-02-15
- 1.0.4 — 2017-02-15
- … 4 more at https://npm.io/package/zent-select/versions

## README

## Select 选择器

选择器，提供多种选择器功能。

### 使用指南

组件分层：主要分成 Select, Popup, Trigger 三个模块

#### 1. Select

核心控制器，主要职责是格式化数据，负责 Popup 和 Trigger 间的数据传输

#### 2. Popup

选项列表弹出层，主要负责展示选项，数据过滤控制

#### 3. Trigger

  - 触发器，暴露给使用者，可以通过 trigger 属性进行配置
  - 核心的 trigger 有 SelectTrigger 和 InputTrigger
  - TagsTrigger 是基于 InputTrigger 扩展出来的拥有多选功能的 trigger
  - 使用者可以自行扩展或开发 trigger

### 代码演示

:::demo 基础用法
```js
import { Select } from 'zent';

const Option = Select.Option;

ReactDOM.render(
  <Select>
    <Option value="1">选项一</Option>
    <Option value="2">选项二</Option>
    <Option value="3">选项三</Option>
  </Select>
  , mountNode
);
```
:::

:::demo 支持数组类型选项
```js
import { Select } from 'zent';

const data = ['选项一', '选项二', '选项三'];

ReactDOM.render(
  <Select data={data} />
  , mountNode
);
```
:::

:::demo 支持对象形式的选项文案与选项值
```js
import { Select } from 'zent';

const data = [
     {value: 1, text: '选项一'},
     {value: 2, text: '选项二'},
     {value: 3, text: '选项三'}
];

ReactDOM.render(
  <Select data={data} />
  , mountNode
);
```
:::

:::demo 支持自定义文案与值对应的key
```js
import { Select } from 'zent';

const data = [
     {id: 1, name: '选项一'},
     {id: 2, name: '选项二'},
     {id: 3, name: '选项三'}
];

ReactDOM.render(
  <Select
    data={data}
    optionValue="id"
    optionText="name"
  />
  , mountNode
);
```
:::

:::demo 支持键盘上下方向键选择选项
```js
import { Select } from 'zent';

const data = [
     {id: 1, name: '选项一'},
     {id: 2, name: '选项二'},
     {id: 3, name: '选项三'}
];

ReactDOM.render(
  <Select
    data={data}
    optionValue="id"
    optionText="name"
  />
  , mountNode
);
```
:::

:::demo 支持选项改变后的回调
```js
import { Select, Dialog } from 'zent';

const data = [
     {id: 1, name: '选项一'},
     {id: 2, name: '选项二'},
     {id: 3, name: '选项三'}
];

function showOption(ev, data) {
  Dialog.openDialog({
    children: `你选择了${data.name}, 值是${data.id}`
  });
}

ReactDOM.render(
  <Select
    data={data}
    optionValue="id"
    optionText="name"
    onChange={showOption}
  />
  , mountNode
);
```
:::

:::demo 支持禁用选项组件
```js
import { Select } from 'zent';

const data = [
     {id: 1, name: '选项一'},
     {id: 2, name: '选项二'},
     {id: 3, name: '选项三'}
];

ReactDOM.render(
  <Select
    data={data}
    optionValue="id"
    optionText="name"
    disabled
  />
  , mountNode
);
```
:::

:::demo 支持过滤功能
```js
import { Select } from 'zent';

const data = [
     {id: 1, name: '选项一'},
     {id: 2, name: '选项二'},
     {id: 3, name: '选项三'}
];

ReactDOM.render(
  <Select
    data={data}
    optionValue="id"
    optionText="name"
    filter={(item, keyword) => item.name.indexOf(keyword) > -1}
  />
  , mountNode
);
```
:::

:::demo 支持自定义搜索框文案
```js
import { Select } from 'zent';

const data = [
     {id: 1, name: '选项一'},
     {id: 2, name: '选项二'},
     {id: 3, name: '选项三'}
];

ReactDOM.render(
  <Select
    data={data}
    optionValue="id"
    optionText="name"
    searchPlaceholder="Search"
    filter={(item, keyword) => item.name.indexOf(keyword) > -1}
  />
  , mountNode
);
```
:::

:::demo 支持自定义无选项文案
```js
import { Select } from 'zent';

const data = [
     {id: 1, name: '选项一'},
     {id: 2, name: '选项二'},
     {id: 3, name: '选项三'}
];

ReactDOM.render(
  <Select
    data={data}
    optionValue="id"
    optionText="name"
    emptyText="No Result"
    filter={(item, keyword) => item.name.indexOf(keyword) > -1}
  />
  , mountNode
);
```
:::

:::demo 支持输入搜索
```js
import { Select } from 'zent';

const data = [
     {id: 1, name: '选项一'},
     {id: 2, name: '选项二'},
     {id: 3, name: '选项三'}
];

ReactDOM.render(
  <Select
    data={data}
    optionValue="id"
    optionText="name"
    search
    filter={(item, keyword) => item.name.indexOf(keyword) > -1}
  />
  , mountNode
);
```
:::

:::demo 支持多选标签
```js
import { Select } from 'zent';

const data = [
     {id: 1, name: '选项一'},
     {id: 2, name: '选项二'},
     {id: 3, name: '选项三'}
];

ReactDOM.render(
  <Select
    data={data}
    optionValue="id"
    optionText="name"
    tags
    filter={(item, keyword) => item.name.indexOf(keyword) > -1}
  />
  , mountNode
);
```
:::

### API

| 参数 | 说明 | 类型 | 默认值 | 是否必填 |
|------|------|------|--------|--------|
| data | 选项数据 | array | `[]` | 是 |
| value | 选中的值，当为tags类型时，可以传入数组 | any | `''` | 否 |
| index | 选中索引 | any | `''` | 否 |
| disabled | 禁用组件 | bool | `false` | 否 |
| placeholder | 默认提示文案 | string | `'请选择'` | 否 |
| searchPlaceholder | 搜索框默认文案 | string | `''` | 否 |
| emptyText | 空列表提示文案 | string | `'没有找到匹配项'` | 否 |
| trigger | 自定义触发器 | function | `Select.SelectTrigger` | 否 |
| optionText | 自定义选项显示文案对应的key, 如{ id: 1, name: '文案' }, 设置optionText="name" | string | `'text'` | 否 |
| optionValue | 自定义选项的值对应的key, 如{ id: 1, name: '文案' }, 设置optionValue="id" | string | `'value'` | 否 |
| onChange | 选择变更后的回调函数 | function | `noop` | 否 |
| onDelete | 删除标签后的回调函数 | function | `noop` | 否 |
| filter | 过滤条件，设置以后才会开启过滤功能 | function | `null` | 否 |
| onAsyncFilter | 异步设置过滤后的数据 | function | `null` | 否 |
| onEmptySelected | 选中过滤条件为空时的回调 | function | `noop` | 否 |
| onOpen | 展开时的回调 | function | `noop` | 否 |
| className | 自定义额外类名 | string | `''` | 否 |
| prefix | 自定义前缀 | string | `'zent'` | 否 |

`如果 data 和 children 两种方式同时使用，data 会将 children 覆盖，主要是为了可以接收异步数据直接改变 data 属性来改变选项。`

### Trigger开发API

| 参数 | 说明 | 类型 | 默认值 | 是否必填 |
|------|------|------|--------|--------|
| selectedItems | 已选择的条目 | array | `[]` | 否 |
| extraFilter | 是否自带过滤功能 | boolean | `false` | 否 |
| open | 是否打开Popup | boolean | `false` | 否 |

`Trigger 可以通过调用 this.props.onChange({...}) 通过改变 Popup 的 props 实现参数传递。`

---
_Source: https://npm.io/package/zent-select · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._