最新要闻

广告

手机

iphone11大小尺寸是多少?苹果iPhone11和iPhone13的区别是什么?

iphone11大小尺寸是多少?苹果iPhone11和iPhone13的区别是什么?

警方通报辅警执法直播中被撞飞:犯罪嫌疑人已投案

警方通报辅警执法直播中被撞飞:犯罪嫌疑人已投案

家电

【vue流程编辑器框架】Vue-Flowchart-Editor

来源:博客园


(相关资料图)

前言:

不管是OA系统常见的审批流程图还是业务流程图,前端经常会遇到一些流程编辑器的业务场景,分享一个我举得好用的vue组件:

Vue-Flowchart-Editor:一个基于Vue的流程图编辑器组件,支持创建、编辑和展示流程图,具有可拖拽节点、连接线、自动布局等功能。

官网地址:https://gitee.com/martsforever-pot/vue-flow-editor

简介

vue-flow-editor 是基于 Vue2.0 以及 G6@3.1.10 实现的流程编辑器。在线操作地址:

http://martsforever-pot.gitee.io/vue-flow-editor/

特点

  • 兼容ie;
  • 轻量级依赖
    • 依赖于 Vue2.0、vue-composition-api、g6、element-ui,但是打包的 vue-flow-editor 中是不包含这些依赖的, 由开发者手动引入,方便管理依赖;
    • 对G6的连接线进行了简单封装,对节点无影响。开发者可以使用G6的默认节点以实现自定义的样式;
    • 操作丰富,请见操作手册;
  • 界面简洁,左侧菜单栏以及顶部工具栏都有插槽供开发者自定义内容;
  • 内置一个右侧弹出框,开发者可以通过插槽,以及手动打开这个弹出框以编辑节点内容;

安装

npm安装

npm i vue-flow-editor element-ui @vue/composition-api@0.3.2 -D
1 import Vue from "vue" 2  3 import ELEMENT from "element-ui" 4 import "element-ui/lib/theme-chalk/index.css" 5  6 import "vue-flow-editor/docs/lib/g6.umd.min" 7 import vca from "@vue/composition-api" 8 import VueFlowEditor from "vue-flow-editor" 9 import "vue-flow-editor/docs/dist/vue-flow-editor.css"10 11 import App from "./App.vue"12 13 Vue.use(ELEMENT)14 Vue.use(vca)15 Vue.use(VueFlowEditor)16 17 Vue.config.productionTip = false18 19 new Vue({20     render: h => h(App),21 }).$mount("#app")

效果图:

注意:如果你的构建目标需要兼容ie的话,这样做还不够,你还需要这么做:

  1. 配置webpack,编译的时候排除vue以及 @vue/composition-api,因为引入的 @vue/composition-api好像不支持ie,所以要这么做;
  2. 再index.html模板文件中手动引入这两个文件:
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.11/vue.min.js"></script><script src="https://unpkg.com/@vue/composition-api/dist/vue-composition-api.umd.js"></script>

关键词: