gojs-flow-designer

GoJsDesigner

在线 demo

开始使用

• npm 引入

import GoJsDesigner from 'gojs-designer'
import 'gojs-designer/lib/gojs-designer.css';

<GoJsDesigner
  :preview="preview"
  @nodeOnClick="nodeOnClick"
  :data="data"
  ref="designer"
>
</GoJsDesigner>

• 浏览器引入

<script src="https://unpkg.com/gojs-designer"></script>
<link href="https://unpkg.com/gojs-designer/lib/gojs-designer.css" />

<go-js-designer
  :preview="preview"
  @nodeOnClick="nodeOnClick"
  :data="data"
  ref="designer"
>
</go-js-designer>

效果展示

• 编辑模式

• 预览模式

Props

• data: Object // 流程图 json

• preview: boolean // 是否为预览模式

Event

• nodeOnClick: (node) => {} // 返回 node 节点信息

Methods

• getJSON

// 获取流程json
this.$refs.designer.getJSON();

• redraw

// 重新渲染
this.$refs.designer.redraw();