@teld-approval/flow

@teld-approval/flow as ApprovalFlow

提供：

• flowStore
• 组件
  • ApprovalFlow 流程图设计回显用主组件（包括图例、画布及其内的树形流程图）
  • ProcessTree 树形流出图渲染组件（一般不单独使用）
  • 其他组件

Install

npm i @teld-approval/flow

Usage

src/store/index.js 中使用 flowStore 模块，请确保模块名为flow

import Vue from 'vue'
import Vuex from 'vuex'
// import flow from './flow'
import { flowStore } from '@teld-approval/flow'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
  },
  getters: {
  },
  mutations: {
  },
  actions: {
  },
  modules: {
    flow: flowStore,
  }
})

Vue 文件中局部安装使用

<script>
import { ApprovalFlow, FlowTree, Ellipsis } from '@teld-approval/flow'
import '@teld-approval/flow/index.css';

export default {
  components: {
    ApprovalFlow,
    FlowTree,
    Ellipsis,
  }
}
</script>

或 main.js 全局安装

import Vue from 'vue'
import ApprovalFlow from '@teld-approval/flow';
// 样式在内部已自动引入了，无需再单独引入
// import '@teld-approval/flow/index.css'

Vue.use(ApprovalFlow);

/**
 * 可用组件：
 * - ProcessTree 流出图组件
 * - Ellipsis 单行/多行文字溢出省略组件
 */

关于拖动与缩放功能

vue-grabbing-box