npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

ref-combobox

v3.0.0

Published

## 何时使用

Downloads

29

Readme

下拉参照 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删除数据| 否 [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稳定版本开始

更新日志