1.0.3 • Published 3 years ago
visbar-blueprint v1.0.3
Visbar-blueprint
Visbar搭建蓝图
快速开始
npm i visbar-blueprint --save
# 或
yarn add visbar-blueprint --save
<BluePrint config={blueprintConfig} initGraph={{}} onChange={this.handleChange} />
必要依赖
- react
- react-dom
- antd
- jquery
- react-monaco-editor
入参配置
参数名 | 参数描述 | 参数类型 | 默认值 |
---|---|---|---|
config | 蓝图大纲树配置 | any | {} |
initGraph | 初始化蓝图状态 | any | - |
onChange | 蓝图状态数据变更的回调 | (graph: any) => any | - |
数据结构:
config数据结构:
interface IBaseConfig {
name: string; // 控件名
action: { // 控件的触发动作集合
...
},
event: { // 控件触发的事件集合
...
}
}
type ConfigType = { [id: string]: IBaseConfig; }
graph数据结构(蓝图输出数据结构)
interface NextPointer {
id: string; // 下一步链接节点id
actionName: string; // 触发节点的动作名
eventName: string; // 当前触发事件名
}
interface IBaseGraph {
type: string; // 控件类型
next?: Array<NextPointer>;
[key: string]: any; // 这里对于node节点和condition节点会添加其对应的事件节点进去
}
type GraphType = { [id: string]: IBaseGraph }