@lgguan/custom-tool-bar
自定义工具条
参数名 | 说明 | 必填 | 类型 | 默认值 | 备注 |
---|---|---|---|---|---|
config | 工具对象参数集合,详见ToolObject对象说明 | true | Array | [] | |
getInstance | 获取实例函数,主要用于获取组件的filed属性,从而获得表单中的value值 | false | Function | - |
参数名 | 说明 | 必填 | 类型 | 默认值 | 备注 |
---|---|---|---|---|---|
label | 工具的前置标签 | true | String | - | Button工具的label为显示标签 |
key | 工具的key | true | String | - | |
field | 工具的表单字段 | false | String | - | |
defaultValue | 工具的表单字段默认值 | false | Object | - | |
component | 工具的类型 | true | String | - | 仅支持Input, Select, DatePicker, TimePicker, Button |
componentProps | 工具的所有自有属性 | false | Object | {} |
本 Demo 演示自定工具条的用法。
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import ToolBar from '@lgguan/custom-tool-bar';
class App extends Component {
_searchField = null;
config = [
{
label: '姓名',
key: 'name',
component: 'Input',
field: 'name',
componentProps: {
trim: true,
placeholder: '请输入姓名'
}
},
{
label: '性别',
key: 'sex',
component: 'Select',
field: 'sex',
defaultValue: 0,
componentProps: {
dataSource: [
{
label: 'All',
value: 0,
},
{
label: '男性',
value: 1,
},
{
label: '女性',
value: 2,
},
]
}
},
{
label: '开始日期',
key: 'startTime',
component: 'DatePicker',
field: 'startTime',
defaultValue: '2019-08-10 01:30:00',
componentProps: {
placeholder: 'Please select date',
resetTime: true,
}
},
{
label: '时间',
key: 'time',
component: 'TimePicker',
field: 'time',
defaultValue: '01:30',
componentProps: {
placeholder: 'Please select time',
format: 'HH:mm',
}
},
{
label: '单选',
key: 'radio',
component: 'Radio',
field: 'radio',
componentProps: {
}
},
{
label: 'Search',
key: 'search',
component: 'Button',
componentProps: {
disabled: false,
onClick: () => this.onSearch()
}
},
{
label: 'New',
key: 'new',
component: 'Button',
componentProps: {
disabled: true,
}
},
];
onSearch = () => {
console.log('click search ...')
console.log('search params: ', this._searchField.getValues())
}
render() {
return (
<div>
<ToolBar config = {this.config}
getInstance={(childCp) => {
if (childCp) {
this._searchField = childCp.getField()
}
}} />
</div>
);
}
}
ReactDOM.render((
<App />
), mountNode);