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 流程图生成过程中生成的组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组件之树状选择器组件文档

相关文章
|
18天前
「Mac畅玩鸿蒙与硬件46」UI互动应用篇23 - 自定义天气预报组件
本篇将带你实现一个自定义天气预报组件。用户可以通过选择不同城市来获取相应的天气信息,页面会显示当前城市的天气图标、温度及天气描述。这一功能适合用于动态展示天气信息的小型应用。
124 38
|
9天前
|
人工智能 开发框架 JavaScript
LowCodeEngine:阿里开源的企业级低代码开发平台,提供预制的 UI 组件和模板,覆盖完整的研发周期
LowCodeEngine 是阿里巴巴开源的低代码开发框架,旨在通过拖拽、配置等简单操作,帮助开发者快速构建复杂的系统页面,提升开发效率和质量。
52 4
LowCodeEngine:阿里开源的企业级低代码开发平台,提供预制的 UI 组件和模板,覆盖完整的研发周期
|
9天前
|
前端开发 Linux C#
一款开源、免费、美观的 Avalonia UI 原生控件库 - Semi Avalonia
一款开源、免费、美观的 Avalonia UI 原生控件库 - Semi Avalonia
42 10
|
2月前
|
UED
「Mac畅玩鸿蒙与硬件31」UI互动应用篇8 - 自定义评分星级组件
本篇将带你实现一个自定义评分星级组件,用户可以通过点击星星进行评分,并实时显示评分结果。为了让界面更具吸引力,我们还将添加一只小猫图片作为评分的背景装饰。
80 6
|
2月前
|
前端开发 开发者
「Mac畅玩鸿蒙与硬件22」鸿蒙UI组件篇12 - Canvas 组件的动态进阶应用
在鸿蒙应用中,Canvas 组件可以实现丰富的动态效果,适合用于动画和实时更新的场景。本篇将介绍如何在 Canvas 中实现动画循环、动态进度条、旋转和缩放动画,以及性能优化策略。
67 6
|
2月前
|
前端开发 开发者
「Mac畅玩鸿蒙与硬件23」鸿蒙UI组件篇13 - 自定义组件的创建与使用
自定义组件可以帮助开发者实现复用性强、逻辑清晰的界面模块。通过自定义组件,鸿蒙应用能够提高代码的可维护性,并简化复杂布局的构建。本篇将介绍如何创建自定义组件,如何向组件传递数据,以及如何在不同页面间复用这些组件。
59 5
|
1月前
|
XML 搜索推荐 前端开发
安卓开发中的自定义视图:打造个性化UI组件
在安卓应用开发中,自定义视图是一种强大的工具,它允许开发者创造独一无二的用户界面元素,从而提升应用的外观和用户体验。本文将通过一个简单的自定义视图示例,引导你了解如何在安卓项目中实现自定义组件,并探讨其背后的技术原理。我们将从基础的View类讲起,逐步深入到绘图、事件处理以及性能优化等方面。无论你是初学者还是有经验的开发者,这篇文章都将为你提供有价值的见解和技巧。
|
存储 弹性计算 安全
成功案例-钉钉 | 学习笔记
快速学习 成功案例-钉钉
415 0
|
存储 弹性计算 安全
案例分享——钉钉|学习笔记
快速学习 案例分享——钉钉
387 0