bee-select

下拉弹出菜单，代替原生的选择器。当然Select扩展了其他功能：多选，级联，搜索过滤单选和搜索过滤多选与自动填充选择。

使用

使用单独的bee-select包

组件引入

先进行下载bee-select包

npm install --save bee-select

组件调用

import Select from 'bee-select';
const Option = Select.Option;

React.render(<div>
class Demo extends Component {
	handleChange(value) {
  		console.log(`selected ${value}`);
	}
	render(){
		return( 
			<div>
			    <Select defaultValue="lucy" style={{ width: 200 }} onChange={handleChange}>
			      <Option value="jack">Jack</Option>
			      <Option value="lucy">Lucy</Option>
			      <Option value="disabled" disabled>Disabled</Option>
			      <Option value="yiminghe">Yiminghe</Option>
			    </Select>
			</div>
		)
	}
}
</div>, document.getElementById('target1');

样式引入

//如果例子中引入其他组件，需将此组件样式引入

• 可以使用link引入dist目录下bee-select.css

<link rel="stylesheet" href="./node_modules/build/bee-select.css">

• 可以在js中import样式

import "./node_modules/src/Select.scss"
//或是
import "./node_modules/build/bee-select.css"

API

Select

|参数|说明|类型|默认值| |---|----|---|------| |open|控制下拉框展开收起|bool|false| |value|指定当前选中的条目|string/array/react node|-| |defaultValue|指定默认选中的条目|string/array/react node|-| |multiple|支持多选|bool|false| |allowClear|支持清除, 单选模式有效|bool|false| |filterOption|是否根据输入项进行筛选。当其为一个函数时，会接收 inputValue option 两个参数，当 option 符合筛选条件时，应返回 true，反之则返回 false|bool/func|true| |tags|可以把随意输入的条目作为 tag，输入项不需要与下拉选项匹配|bool|false| |onSelect|被选中时调用，参数为选中项的 value 值|func|-| |onDeselect|取消选中时调用，参数为选中项的 option value 值，仅在 multiple 或 tags 模式下生效|func|-| |onChange|选中 option，或 input 的 value 变化（combobox 模式下）时，调用此函数|bool|-| |scrollToEdn|钩子函数 下拉列表的滚动条滚到最底触发|func|-| |onSearch|文本框值变化时回调|func|-| |onBlur|失去焦点的时回调|func|返回当前值array| |onFocus|获得焦点时回调|func|返回当前值array| |placeholder|选择框默认文字 |string|-| |notFoundContent|当下拉列表为空时显示的内容|string|'Not Found'| |dropdownMatchSelectWidth|下拉菜单和选择器同宽|true|-| |optionLabelProp|回填到选择框的 Option 的属性值，默认是 Option 的子元素。比如在子元素需要高亮效果时，此值可以设为 value|string/number|children （combobox 模式下为 value| |combobox|输入框自动提示模式|bool|false| |size|选择框大小，可选 lg sm|string|default| |showSearch|是否可以输入搜索|bool|false| |supportWrite|输入搜索查询时是否支持自定义输入，需配合showSearch使用，否则无效|bool|false| |disabled|是否禁用|bool|false| |defaultActiveFirstOption|是否默认高亮第一个选项|bool|true| |dropdownStyle|下拉菜单的 style 属性|object|-| |dropdownClassName|下拉菜单的 className 属性|string|-| |getPopupContainer|菜单渲染父节点。默认渲染到 body 上，如果你遇到菜单滚动定位问题，试试修改为滚动的区域，并相对其定位|func|() => document.body| |labelInValue|是否把每个选项的 label 包装到 value 中，决定 Select 的 value 类型。|bool|false| |data|可以设置data属性来自动生成option,可以参见demo中的示例。也可以设置是否禁用disabled|Array|-| |autofocus|设置是否默认打开，此属性需配合onFocus、onBlur 。|bool|false| |onKeyDown|按下键盘的回调|func|-| |Children|必填，Option组件/OptGroup组件|node|-|

Option

|参数|说明|类型|默认值| |---|----|---|------| |key|如果 react 需要你设置此项，此项值与 value 的值相同，然后可以省略 value 设置|string|-| |value|默认根据此属性值进行筛选 |string|-| |disabled|是否禁用|bool|false|

OptGroup

|参数|说明|类型|默认值| |---|----|---|------| |label|组名|string/react element|-| |mode||string|-| |Children|Option组件|node|-|

已支持的键盘操作

|按键|功能| |:---|:----| |↑(上箭)|切换选项| |↓(下箭) |切换选项| |esc |关闭下拉项| |enter | 选中下拉框|

注意

在Modal组件中，使用Select组件时，需要使用getPopupContainer,来让下拉显示在modal上。

return (
    <Select
        getPopupContainer={() => document.getElementById('modalId')}>
    </Select>
)

开发调试

$ git clone https://github.com/tinper-bee/bee-select
$ cd bee-select
$ npm install
$ npm run dev