ref-combobox

3.0.0 • Public • Published

下拉参照 RefCombobox

何时使用

下拉参照

如何使用

$ ynpm install ref-combobox --save

引入

import RefComboBoxBaseUI from 'ref-combobox';

样式

import 'ref-combobox/lib/index.css';
或者
import 'ref-combobox/lib/index.less';

代码演示

分类

RefComboBoxBaseUI

带有输入框,下拉选择参照。默认,需要配合使用下面两个

[Deprecated]ComboStore

可走缓存数据的下拉。

[Deprecated]ComboItem

下拉的单条数据

API

RefComboBoxBaseUI

参数 类型 默认值 说明 必选
className string 参照class样式,作用于整个参照的样式,默认为空。 'ref-walsin-modal'特殊样式
theme String 'ref-red' 启用参照默认样式
style object {} 参照style样式
dropdownStyle object - 下拉菜单的样式
disabled boolean false 是否禁用
defaultOpen boolean - 默认是否打开
dropdownClassName string - 下拉菜单的 className 属性
dropdownMatchSelectWidth boolean true 下拉菜单和选择器同宽
dropdownStyle object - 下拉菜单的样式
notFoundContent String '无匹配结果' 设定搜索不到数据显示的内容
multiple boolean false 支持多选
placeholder string - 选择框默认文字
searchPlaceholder string - 搜索框默认文字
maxTagCount number - 否 最多显示的tag数
maxTagPlaceholder ReactNode/function(omittedValues) - 隐藏 tag 时显示的内容
searchValue string - 搜索框值
pageCount number 10 总页数
currPageIndex number 0 当前页码
loading boolean -- 是否展示加载
totalElements number 0 总条数
displayField string 或 function '{refname}' 下拉显示的内容的格式;
当为字符串时则会根据{}包裹的增则匹配替换。
如:{refname}
当为函数时则需自定义返回内容,参数为storeData中的数据项。
如:
displayField: (record)=> ${record.refname}-${record.refname}
inputDisplay string 或 function '{refname}' input中显示的内容的格式
当为字符串时则会根据{}包裹的增则匹配替换。
如:{refname}
当为函数时则需自定义返回内容,参数有两种:1:来源于value或者defaultValue;2:下拉选中storeData的数据项
如:
displayField: (record)=> ${record.refname}-${record.refname}。注意inputDisplay有字段限制
valueField string 'refpk' 待提交的value的键。指定storeData数据项的键。要求具有唯一性
defaultValue string/string[] - 指定默认选中的条目。格式同value
value string/array - 指定当前选中的条目。可以是字符串格式或者数组格式。(一)字符串格式:其格式必须满足'{"refname":"","refpk":""}',refname是展示input框上的内容,格式自定义,多选以逗号隔开;refpk对应的是refname每项的键值,这个值要与valueField指定的值一样,此时使用inputDisplay注意,有字段限制。(二)数组格式:[{value:'',label:'',refname:''...}],必须含有valueField指定的字段,展示按照inputField string或者[]
onPaginationSelect function(currentIndex) - 翻页回调,返回当前页面。替换之前的onChangeFormControlt
onSeach function(value) - 搜索框输入值回调,value是输入内容 。替换之前的onForm
onSelectorChange function(selectedArray,item,status) -- 当input框值发生改变会回调此函数。status:选中还是删除该节点,id:valueField指定的字段值,item:该条完整数据,selectedArray:当前选中的全部数据。触发的情形:1.清空操作,返回参数(false,null,null,[]);2.单选或者多选下拉选中数据;3.多选下删除单个数据;4.多选下delete删除数据
disabled Boolean false 是否禁用下拉参照
placeholder String '' placeholder
[Deprecated]sliderWidth number或者String 下拉菜单的宽度
[Deprecated]comboboxStoreData array [] 下拉参照要展示dom集合,搭配使用
[Deprecated]onClickItemInner function(selectedArray,item, status) -- 下拉选中,返回缓存的数据对应的数据。在没有传storeData情形下,不能返回完整数据,只能返回数据键值,展示值和event。id是键,item完整数据,status是选中还是删除,selectedArray是当前选中全部数据
[Deprecated]onChangeFormControl function(value) - 输入框输入值回调,value是输入内容或者清空回调
[Deprecated]onSelect function(currentIndex) - 翻页回调,返回跳转页面
[Deprecated]onPopupVisibleChange function(popupVisible,sliderSearchVal) - 下拉面板状态改变时回调函数

注意事项

参数解析

1.value vs displayField vs inputDisplay

  • 1.1 displayField指定下拉列表menu的每条数据如何展示,可以带有icon
displayField : (record) => {
    return 
    <div > 
       <Icon type="uf-personin-o" style={{ color: 'red' }} />     {record.refname}-{record.refcode}-{record.type}
    </div>
}
  • 1.2 inputDisplay 指定input框上的值如何展示,inputDisplay与value的格式有很大关系。
    • 1.2.1 字符串格式:value='{"refname":"用友集团1,用友集团2","refpk":"org1,org2"}' inputDisplay指定的字段只能包含refname和refpk。
    • 1.2.2 数组格式: value=[{label1:'label1',label2:'',label3:'',....,[valueField]:'键值'}] inputDisplay指定的字段可以是label1~[valueField]
value:[{refname:'用友',refpk:'org1',id:'no.1'}]
inputDisplay:(record) =>{
  return `${record.refname}-${record.id}`
}

2.多选功能下拉参照以及函数改名是在2.1.0稳定版本开始

更新日志

Readme

Keywords

none

Package Sidebar

Install

npm i ref-combobox

Weekly Downloads

5

Version

3.0.0

License

MIT

Unpacked Size

2.55 MB

Total Files

20

Last publish

Collaborators

  • rongqb
  • duxue
  • jwangyangls
  • shaohlr
  • honely1314
  • xiaoshutong
  • yonyoufed
  • jonyw
  • guoyongfeng
  • kvkens
  • whizbz
  • npm_yx
  • bjyxszd
  • tinper-bot
  • gaox2025f
  • gcht163
  • cnkvkens
  • diozhu
  • wangjings123
  • wxgg