Vue 仿钉钉流程图（流程节点绘制 vue+Ant【如果用其他UI库需要替换几个组件】 附 demo）

Vue 仿钉钉流程图（流程节点绘制 vue+Ant Design of Vue）

这里是git地址

Table of Contents generated with DocToc

• 仿钉钉自定义流程文档
  • 效果图
  • 使用方法
    • Attributes
    • Events
    • 方法
    • TreeNode

仿钉钉自定义流程文档

效果图

使用方法

在需要的地方引入，例如全局引入 (main.js)

import DrawFlow from "./components/DrawFlow";
Vue.use(DrawFlow);

然后就使用它

 <FactoryDrawFlow
      @clickNode="clickNode"
      ref="flow"
      :FlowConfig="FlowConfig"
    >FactoryDrawFlow>

Attributes

参数	说明	类型	可选值	默认值
FlowConfig	展示数据	FlowConfig	–	–

Events

事件名称	说明	回调参数
clickNode	点击流程节点时触发	返回当前节点数据（TreeNode）

方法

方法名称	说明	回调参数
getResData	获取流程图数据	返回两个参数，依次为：所有流程节点的一维数组集合、用于渲染流程图而生成的树状结构
nodeChange	在自己业务页面操作完，当前节点发生变化时，可手动去触发	支持传入当前改变的节点，数据结构参考下文TreeNode

TreeNode

参数	说明	类型	可选值	默认值
id	定位节点的唯一标识	string	–	–
groupId	流程图生成过程中生成的组id	string	–	–
type	节点类型	string	‘1’,‘2’,‘3’,‘4’,‘5’,‘6’	–
title	标题	string	–	–
groupPid	流程图渲染过程中所应用数据	string	–	–
content	节点显示内容	string	–	–
isRow	是否为行元素	boolean	–	–
isRoot	是否为根节点	boolean	–	–
data	拓展属性，用以存储业务相关内容	object	–	{}
pids	流程图生成过程中生成属性，指明此节点父节点数组	Array<‘string’>	–	–

这里是git地址

开源不易 求star

笔者致力于开发遇到的各种复杂组件，虽说授人以鱼不如授人以渔，但是很多情况下我们是需要先恰饭的，所以先鱼钓上来，希望帮各位刚上路的道友填饱肚子

以下是我所有组件开源的地址与博客 希望各位多点赞多star

前端组件集合文章
vue组件-echarts地图显示柱状图并添加点击事件文档
vue组件之仿钉钉自定义流程图组件文档
vue组件之树状选择器组件文档