开发者社区> mfqqtnwnngpxm> 正文

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

简介: # [这里是git地址](https://gitee.com/xiaoyaoluntian/imitating-dingding-flow-chart/tree/comdemo/)
+关注继续查看

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

这里是git地址

Table of Contents generated with DocToc

仿钉钉自定义流程文档

效果图

在这里插入图片描述

使用方法

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

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
SpringBoot+Activiti6流程节点的任意跳转
项目中遇到的要求,在此记录一下。可以回退,可以任意跳转,都会有记录。
116 0
钉钉消息机器人.Net通用C#Unity实现钉钉消息通知一个工具类(无需SDK,无其他引用)
钉钉消息机器人.Net通用C#Unity实现钉钉消息通知一个工具类(无需SDK,无其他引用) Chinar —— 心分享、心创新! 助力快速完成 .Net 通用的钉钉Post机器人消息通知 为初学者节省宝贵的时间,避免采坑! 官方文档详细,但实现方式上没有过多的说明。 本质上就是一个 POST 消息请求 所以我们只要, 完成正常发送POST 使得钉钉方从中可获取对应格式的数据 即可!
444 0
SpringMVC(一)——【快速入门、执行流程、组件分析】
SpringMVC(一)——【快速入门、执行流程、组件分析】
32 0
阿里云服务器怎么设置密码?怎么停机?怎么重启服务器?
如果在创建实例时没有设置密码,或者密码丢失,您可以在控制台上重新设置实例的登录密码。本文仅描述如何在 ECS 管理控制台上修改实例登录密码。
19407 0
数据集成模块流程组件之条件分发介绍
在数据集成的过程中,在一些场景下,需要对上游数据进行分发操作,条件分发组件可对上游数据根据配置条件进行分发,本文将介绍如何进行条件分发组件的配置。
41 0
个人/团队/企业/组织申请计算机软件著作权的流程
个人/团队/企业/组织申请计算机软件著作权的流程
35 0
阿里云服务器如何登录?阿里云服务器的三种登录方法
购买阿里云ECS云服务器后如何登录?场景不同,阿里云优惠总结大概有三种登录方式: 登录到ECS云服务器控制台 在ECS云服务器控制台用户可以更改密码、更换系.
24483 0
activiti explorer跨模板复制流程节点
最近的项目是用activiti explorer做流程前端。 功能做出来后,经常被用户反馈 ,说流程页面不好用。 画一个流程图后,再画一个,都要重头开始,如果导入及导出,用户又嫌麻烦。
811 0
阿里云ECS云服务器初始化设置教程方法
阿里云ECS云服务器初始化是指将云服务器系统恢复到最初状态的过程,阿里云的服务器初始化是通过更换系统盘来实现的,是免费的,阿里云百科网分享服务器初始化教程: 服务器初始化教程方法 本文的服务器初始化是指将ECS云服务器系统恢复到最初状态,服务器中的数据也会被清空,所以初始化之前一定要先备份好。
14442 0
3
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
OceanBase 入门到实战教程
立即下载
阿里云图数据库GDB,加速开启“图智”未来.ppt
立即下载
实时数仓Hologres技术实战一本通2.0版(下)
立即下载