0.0.3 • Published 6 years ago
helpcomponent-test v0.0.3
效果图
安装组件
npm install helpcomponent --save
引入组件
import HelpComponent from 'helpcomponent'
使用组件
<HelpComponent label="项目名称" inputValue={state.inputValue}
required={true} editable={false} readOnly={false} headerTitle="请选择项目名称"
helpType="hot" hotName="Project_Name_Hot" hotTextField="Project_Name"
helpValueField="ID" helpTextFieldArray={["Project_Name"]}
loadData={this.viewModel.loadProjectData}
afterSelectItem={this.viewModel.afterSelectProject_Name}>
</HelpComponent>
loadProjectData(layer = 0, itemId, searchingText = "", pageIndex, pageSize) {
let observable = Observable.create(function (observer) {
setTimeout(() => {
observer.next(projectMockData);
}, 5000)
});
return observable;
}
afterSelectProject_Name(selectedProject) {
this.setState({
inputValue: selectedProject.Project_Name
});
}
组件属性
属性 | 描述 | 类型 | 默认值 | 必选 |
---|---|---|---|---|
label | input标签 | string | false | |
placeholder | placeholder | string | false | |
inputValue | input值(受控) | string | true | |
required | input是否必填 | boolean | false | false |
editable | input是否可编辑 | boolean | false | false |
readOnly | 是否可以选择帮助 | boolean | false | false |
headerTitle | 帮助页标题 | string | "请选择" | false |
helpValueField | 帮助数据标识字段 | string | ‘ID’ | true |
helpTextField | 帮助展示字段数组(例:"ID","Name") | array | true | |
helpType | 帮助类型(常用:'hot' ,收藏: 'favor') | string | false | |
hotLimit | 常用项最大个数 | number | 4 | false |
hotName | 常用项标识(helpType为hot时必填) | string | true | |
hotTextField | 常用项展示字段(helpType为hot时必填) | string | true | |
isTree | 是否树类型 | boolean | false | false |
favorName | 收藏项标识(helpType为favor时必填) | string | true | |
showMessage | 是否显示校验提示 | boolean | false | false |
message | 校验提示信息(showMessge为true时展示) | string | false | |
onInputChange | 输入框change事件回调 (value)=>void | false | ||
afterSelectItem | 选中帮助项后的回调 (selectedItem)=>void | false | ||
loadData | 加载帮助数据的回调,返回值必须为Observable类型(layer,itemId,searchingText,pageIndex,pageSize) =>Observable | true |