LogicFlow Designer

一个基于 LogicFlow 和 Vue2 的流程图设计器组件库，可以轻松集成到你的 Vue 项目中。

特性

• 基于 LogicFlow 实现，支持多种节点类型
• 预定义多种节点类型（开始节点、赋值节点、决策节点等）
• 支持自定义节点和边
• 内置属性面板和工具栏
• 支持导出和导入流程数据

安装

npm install logicflow-designer

使用方法

全局注册

import Vue from 'vue';
import LogicFlowDesigner from 'logicflow-designer';

Vue.use(LogicFlowDesigner);

然后在组件中使用：

<template>
  <div>
    <LogicFlowDesigner 
      :title="flowTitle"
      :flowData="flowData"
      :options="lfOptions" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      flowTitle: '我的流程图',
      flowData: null, // 流程图数据
      lfOptions: {}   // LogicFlow 配置选项
    }
  }
}
</script>

局部注册

<template>
  <div>
    <LogicFlowDesigner 
      :title="flowTitle"
      :flowData="flowData"
      :options="lfOptions" />
  </div>
</template>

<script>
import { LogicFlowDesigner } from 'logicflow-designer';

export default {
  components: {
    LogicFlowDesigner
  },
  data() {
    return {
      flowTitle: '我的流程图',
      flowData: null,
      lfOptions: {}
    }
  }
}
</script>

获取和设置数据

可以通过 ref 调用组件方法：

<template>
  <div>
    <LogicFlowDesigner 
      ref="lfDesigner"
      :title="flowTitle" />
    <button @click="getFlowData">获取数据</button>
  </div>
</template>

<script>
import { LogicFlowDesigner } from 'logicflow-designer';

export default {
  components: {
    LogicFlowDesigner
  },
  methods: {
    getFlowData() {
      const data = this.$refs.lfDesigner.$_getData();
      console.log(data);
    }
  }
}
</script>

属性 (Props)

| 属性名 | 类型 | 默认值 | 说明 | |--------|------|--------|------| | title | String | '' | 流程图标题 | | flowData | Object | null | 流程图数据 | | options | Object | {} | LogicFlow 配置选项 |

方法

| 方法名 | 参数 | 返回值 | 说明 | |--------|------|--------|------| | $_getData | 无 | Object | 获取当前流程图数据 |

构建

如果你想自己构建这个包:

# 安装依赖
npm install

# 构建为库
npm run build-bundle

License

MIT