logic-flow-approval v1.0.2

logic-flow-approval

介绍

logic-flow-approval是在Logic Flow组件的基础上，封装的Vue2组件：

• 增加了自定义节点，可缩放的矩形/圆形/菱形
• 增加了自定义边
• 自定义节点/边，都可支持更改常用样式

使用

1.安装插件

npm install logic-flow-approval

2.引入注册

// main.js
import Vue from 'vue';
import LogicFlowApproval from 'logic-flow-approval';
import 'logic-flow-approval/logic-flow-approval.css';
Vue.use(LogicFlowApproval);

3.组件使用

<template>
  <div class="logic-flow-container">
    <LogicFlowApproval
      ref="logicFlowRef"
      :flowJson="flowJson"
      :editFlag="editFlag"
    ></LogicFlowApproval>
  </div>
</template>

<script>
  export default {
    name: 'App',
    data() {
      return {
        flowJson: {},
        editFlag: true,
      };
    },
    methods: {
      // 导出流程图json数据
      getFLowJsonData() {
        if (!this.$refs.logicFlowRef) return {};
        return this.$refs.logicFlowRef.exportFlow() || {};
      },
    },
  };
</script>

<style scoped>
  .logic-flow-container {
    width: 100%;
    height: calc(100vh - 300px);
  }
</style>

注意

因为插件中用了 element-ui 中的表单，所以还需要安装 element-ui

npm i element-ui -S

// main.js

import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

Vue.use(ElementUI);