# menu-selector-tinper-next

> menu-selector 结合列表跟分页的选择控制，支持单选和多选

Latest version **2.0.0** (published 2023-09-12) · MIT license · 0 weekly downloads

## Install

```sh
npm install menu-selector-tinper-next
pnpm add menu-selector-tinper-next
yarn add menu-selector-tinper-next
bun add menu-selector-tinper-next
```

## 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 | 2.0.0 |
| Published | 2023-09-12 |
| First published | 2021-12-28 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 4 |
| Unpacked size | 266.5 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | gaox2025f, shaohlr, honely1314 |

## Links

- npm: https://www.npmjs.com/package/menu-selector-tinper-next
- Repository: https://github.com/tinper-acs/menu-select
- Homepage: https://github.com/tinper-acs/menu-select#readme
- Issues: https://github.com/tinper-acs/menu-select/issues
- npm.io page: https://npm.io/package/menu-selector-tinper-next

## Dependencies (4)

- [raf](https://npm.io/package/raf.md) ^3.4.0
- [rc-util](https://npm.io/package/rc-util.md) ^4.5.0
- [rc-trigger](https://npm.io/package/rc-trigger.md) ^5.2.10
- [react-lifecycles-compat](https://npm.io/package/react-lifecycles-compat.md) ^3.0.4

## Recent versions

- 2.0.0 (latest) — 2023-09-12
- 1.0.4 — 2022-01-13
- 1.0.3 — 2022-01-13
- 1.0.2 — 2021-12-31
- 1.0.1 — 2021-12-30
- 1.0.0 — 2021-12-28

## README

# menu-selector

menu-selector 结合列表跟分页的选择控制，支持单选和多选


## 依赖

- react >= 15.3.0
- react-dom >= 15.3.0
- prop-types >= 15.6.0

## 使用方法

#### 组件引入


```
npm install --save menu-selector
```

组件调用

```js
import React, { Component } from 'react';
import Select from 'menu-selector';

```


#### 样式引入
```js
import  from 'menu-selector/dist/index.css';
```

## API

### Tree props

| 参数 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- |
| allowClear | 显示清除按钮 | boolean | false |
| className | 自定义输入框样式名 | string | - |
| defaultValue | 指定默认选中的条目 | string/string\[] | - |
| disabled | 是否禁用 | boolean | false |
| defaultOpen | 默认是否打开 | boolean | -| 
| dropdownClassName | 下拉菜单的 className 属性 | string | - |
| dropdownMatchSelectWidth | 下拉菜单和选择器同宽 | boolean | true |
| dropdownStyle | 下拉菜单的样式 | object | - |
| notFoundContent | 设定搜索不到数据显示的内容 | String | '无匹配结果' |
| getPopupContainer | 菜单渲染父节点。默认渲染到 body 上，如果你遇到菜单滚动定位问题，试试修改为滚动的区域，并相对其定位。 | Function(triggerNode) | () => document.body |
| multiple | 支持多选| boolean | false |
| placeholder | 选择框默认文字 | string | - |
| searchPlaceholder | 搜索框默认文字 | string | - |
| maxTagCount | 最多显示的tag数 | number | - |
| maxTagPlaceholder | 隐藏 tag 时显示的内容 | ReactNode/function(omittedValues) | - |
| showSearch | 在下拉中显示搜索框。单选模式下搜索框在下拉框中，多选模式在input上展示 | boolean | true |
| searchValue | 搜索框值 | string | - |
| defaultValue | 指定当前选中的条目的初始值，格式参考value | string | -| 
| value | 指定当前选中的条目。可以是字符串格式或者数据格式。（一）字符串格式：其格式必须满足'{"refname":"","refpk":""}',refname是展示input框上的内容，格式自定义，多选以逗号隔开；refpk对应的是refname每项的键值，这个值要与valueField指定的值一样，此时使用inputDisplay注意，字段限制。（二）数组格式：[{value:'',label:'',refname:''...}]，必须含有valueField指定的字段，展示按照inputField| string或者[] | - |
| inputDisplay | input框展示内容格式自定义。item是选中数据。注意：初始值value和defaultValue是默认选中数据，但是初始数据只有refname和refpk，如果inputDisplay涉及其他字段，请在value和defaultValue中添加该字段| function(item) | 
| displayField | 下拉列表展示内容格式自定义。item是valueList中数据项。| function(item) | - 
| topPagination | 分页与下拉列表的位置 ，true分页在上 | boolean | false|
| onSearch | 文本框值变化时回调 | function(value: string) | - |
| onSelectorChange | input框值改变时回调。情况1.清空操作;case2:单选多选下拉选中数据;case3:多选点击单个数据项删除;case4:多选回车 | function(value, node, extra) | - 
| valueList | 下拉菜单数据 | array | [] | 
| valueField| 指定valueList数据项的键 | string | 'refpk' |
| onMenuIconClick | 汉堡按钮点击操作 | function() | 
| pageCount | 下拉菜单中分页的参数：页数。当页数小于1页，不展示分页。|number | 0|
| totalElements | 下拉菜单中分页的参数：总条数 | number | 0 | 
| currPageIndex | 下拉菜单中分页的参数：当前页  |number | 0 |
| onPaginationSelect | 下拉菜单中分页的参数：翻页函数 。index是页码 |function(index) | - |

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