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

Vue 仿钉钉流程图(流程节点绘制 vue+Ant Design of Vue)

这里是git地址

Table of Contents generated with DocToc

仿钉钉自定义流程文档

效果图

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

使用方法

在需要的地方引入,例如全局引入 (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组件之树状选择器组件文档

上一篇:《云计算:概念、技术与架构》一1.6 附加信息


下一篇:Vue 集成腾讯地图基础api Demo集合(基础地图引入与展示模块,地址逆解析,3D/2D切换 ,位置服务,mark标记)