bee-cascader
Browser Support
IE 9+ ✔ | Chrome 31.0+ ✔ | Firefox 31.0+ ✔ | Opera 30.0+ ✔ | Safari 7.0+ ✔ |
react bee-cascader component for tinper-bee
组件引入
先进行下载cascader包
npm install --save bee-cascader
组件调用
;React;
样式引入
- 可以使用link引入dist目录下cascader
<link rel="stylesheet" href="./node_modules/build/bee-cascader.css">
- 可以在js中import样式
//或是
API
参数 | 说明 | 类型 | 默认值 |
---|---|---|---|
placeholder | input提示信息 | string | "" |
options | 下拉列表数据 | json | 必填,无默认值 |
defaultValue | 默认的选中项 | string[] | [] |
changeOnSelect | 当此项为 true 时,点选每级菜单选项值都会发生变化 | boolean | false |
disabled | 禁用 | boolean | false |
expandTrigger | 次级菜单的展开方式,可选 'click' 和 'hover' | string | 'click' |
size | 输入框大小,可选 lg md sm | string | 'md' |
onChange | 选择完成后的回调 | Function(value, selectedOptions) | - |
onClick | 选中节点的钩子函数,返回array选中的节点 | function | - |
inputValue | 自定义输入框展示内容 | string | - |
options格式如下:
const options = [ label: '浙江', value: 'zj', children: [{ label: '杭州', value: 'hz', children: [{ label: '西湖', value: 'xh', children: [{ label: '白娘子', value: 'bnz' },{ label: '许仙', value: 'xx' }] }] }] }, ] }] }, ];
setup develop environment
$ git clone https://github.com/tinper-bee/bee-cascader$ cd bee-cascader$ npm install$ npm run dev
TODO
- test