0.1.0 • Published 4 years ago
chart-flow-edit v0.1.0
流程图引用(只显示流程图)
import { FlowChart } from 'flowEditor';
<FlowChart />
Props
属性 | 类型 | 是否必填 | 默认值 |
---|---|---|---|
data | Object | 是 | 无 |
height | Number | 否 | 400 |
fitView | String | 否 | tc |
DEMO:
import React from 'react';
import './App.css';
import { FlowChart } from 'flowEditor';
const editData = require('./data.json');
class App extends React.Component {
render() {
const data = editData.modelJson
return (
<FlowChart data={data} fitView="tc" />
);
}
}
export default App;
data取值说明:
详见data.json里的modelJson字段
FlowEdit使用说明(可查看每个节点数据):
import { FlowEdit } from 'flowEditor';
<FlowEdit showProperty={true} showVariable={true} showAdvancedSettings={true} data={data} />
Props
属性 | 类型 | 是否必填 | 默认值 | 说明 |
---|---|---|---|---|
showProperty | Boolean | 是 | true | 是否显示流程属性 |
showVariable | Boolean | 是 | true | 是否显示流程变量 |
showAdvancedSettings | Boolean | 是 | true | 是否显示高级设置 |
data | Object | 是 | 无 | 数据格式见data.json完整数据 |
DEMO:
import React from 'react';
import { FlowEdit } from 'flowEditor';
import 'antd/dist/antd.css'
const editData = require('./data.json');
class App extends React.Component {
render() {
const data = editData
return (
<FlowEdit showProperty={true} showVariable={true} showAdvancedSettings={true} data={data} />
);
}
}
export default App;
TIPS:
FlowChart可嵌套在任意容器中,FlowEdit建议新开一个页面,只显示FlowEdit,且页面不要嵌套太多div等容器,最好只有FlowEdit
0.1.0
4 years ago