当前位置: 首页 > >

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

发布时间:

Vue 仿钉钉流程图(流程节点绘制 vue+Ant Design of Vue)
这里是git地址


Table of Contents generated with DocToc


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

仿钉钉自定义流程文档
效果图


使用方法

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


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

然后就使用它


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

Attributes

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

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

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

TreeNode
参数说明类型可选值默认值
id定位节点的唯一标识string??
groupId流程图生成过程中生成的组idstring??
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组件之树状选择器组件文档



友情链接: