3.3.55 • Published 6 years ago

@beisen-phoenix/group-single-select

Licence

ISC

Version

3.3.55

Deps

Size

108 kB

Vulns

Weekly

Summary Dependency Versions

分组弹层

注意：该组件即将废弃，我们将不再新增特性。如需使用新特性请替换为该组件：@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

代码示例

<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函数说明

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

/**
	@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: '这里什么都没有...'}