# @beisen-phoenix/group-single-select

> ## 注意：该组件即将废弃，我们将不再新增特性。如需使用新特性请替换为该组件：@beisen-phoenix/select-list

Latest version **3.3.55** (published 2019-11-25) · ISC license · 0 weekly downloads

## Install

```sh
npm install @beisen-phoenix/group-single-select
pnpm add @beisen-phoenix/group-single-select
yarn add @beisen-phoenix/group-single-select
bun add @beisen-phoenix/group-single-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 | 3.3.55 |
| Published | 2019-11-25 |
| First published | 2019-03-27 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 5 |
| Unpacked size | 107.5 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | beisencorp |

## Links

- npm: https://www.npmjs.com/package/@beisen-phoenix/group-single-select
- npm.io page: https://npm.io/package/@beisen-phoenix/group-single-select

## Dependencies (5)

- [@beisen-phoenix/icon](https://npm.io/package/@beisen-phoenix/icon.md) ^3.2.54
- [@beisen-phoenix/search](https://npm.io/package/@beisen-phoenix/search.md) ^3.3.55
- [@beisen-phoenix/tooltip](https://npm.io/package/@beisen-phoenix/tooltip.md) ^3.3.55
- [@beisen-phoenix/style-token](https://npm.io/package/@beisen-phoenix/style-token.md) ^3.3.55
- [@beisen-phoenix/common-utils](https://npm.io/package/@beisen-phoenix/common-utils.md) ^3.3.55

## Recent versions

- 3.3.55 (latest) — 2019-11-25
- 3.2.44-rc.1 (rc) — 2019-10-24
- 3.3.54 — 2019-11-25
- 3.3.53 — 2019-11-25
- 3.3.52 — 2019-11-24
- 3.3.51 — 2019-11-23
- 3.3.50 — 2019-11-22
- 3.3.49 — 2019-11-22
- 3.3.48 — 2019-11-22
- 3.3.47 — 2019-11-22
- 3.3.46 — 2019-11-22
- 3.3.45 — 2019-11-21
- 3.3.43 — 2019-11-21
- 3.3.42 — 2019-11-21
- 3.3.41-beta.1 — 2019-11-21
- … 415 more at https://npm.io/package/@beisen-phoenix/group-single-select/versions

## README

### 分组弹层

## 注意：该组件即将废弃，我们将不再新增特性。如需使用新特性请替换为该组件：@beisen-phoenix/select-list 

#### API属性如下：
成员|说明|类型|默认值
---|:--:|:--:|---
value|弹层的选中值 |string|-
size|分组弹层的尺寸 small(170px) large(340px) auto(与父级自适应) 若与非模态弹层一块使用, 则使用弹层的size属性即可 |string|-
font|字体大小 small(12px) large(14px) |Function|-
loading|加载状态|Boolean|false
options|选项值|optionsType |-
isSearch|是否显示输入框|Boolean |false
searchWord|搜索的初始值|string|-
onChange|弹层的改变选项时的回调函数|Function({label, value})|-
validateSearch|自定义搜索验证规则函数|(searchValue:string) => {value:string,info:value}|
hasShadow| 是否有阴影|Boolean| false
userDefinedComponent|自定义元素|--|--
isShowTitle|是否显示没有选项的分类的标题|boolean|true
extraCls | 自定义组件容器class,一般用于覆盖组件默认样式使用| string | 无
autoFocus | 首次挂载时是否自动获取焦点（2019-10-15新增） | boolean | false 

2019-07-12新增api
| extraCls | 自定义组件容器class,一般用于覆盖组件默认样式使用| string | 无| No |

#### 代码示例
```
<GroupSingleSelect
value={value}
singleOptions=[{
  label: '增加',
  value: 'add'
}] 
options=[{
  label: "分类一",
  children:[{label: "员工1", value: "staff1"}]
}]
font="small" 
onChange={this.onChange} 
/>
```
#### optionsType类型 

为了实现一些业务场景，联合显示普通单选和分组单组的情况，且为了不改变数据结构，将普通的单选值放在children中且label为空，即：
```
const options = [{
  children: [{
    label: '增加',
    value: add
  }]
}, {
  label: '分类一',
  children: [{
    label: '员工',
    value: 'staff'
  }]
}]
```

#### validateSearch函数说明

该函数为搜索框的自定义验证函数,一般用来验证搜索内容的长度。通过该函数,你可以自定义验证规则,并且当搜索字符串不满足你的验证规则的时候,你可以改变搜索字符串并在组件中给出你的自定义提示内容

``` javascript
/**
	@param val 搜索的字符串
	@return {value: '你自定义的字符串',info:'你自定义的提示信息'}
*/

const validateSearch = (val) => {
  let res = {value:val,info:''}
  if(val.length > 3) {
    return {value: val.slice(0,3),info: '搜索字符不能大于3个'}
  }
  return res
}
```

多语言

| 参数 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- |
| translation | 语言包 用于翻译组件内置常量 | {noData: string} | {noData: '这里什么都没有...'} |

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