bee-select v2.0.33

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

Option

OptGroup

已支持的键盘操作

注意

在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