前端复杂组件库

前端复杂组件库

开发背景

随着前端技术的不断发展，不仅技术栈越来越稳定，各大知名UI库也被广泛应用，其中Element-ui Iview Ant-design 被各大公司在后台管理项目开发中广泛应用。
为了保持组件的原子性，基本所有大型UI库都把各个组件分离开来。 然而 在后台管理系统的开发过程中，有很多功能的完成，需要基于多种组件。 故而，在这里把自己遇到的，开发的，通用的复杂的功能能，总结起来并与业务解耦，开源出一份开箱即用的 前端复杂功能组件库

目前包括

仿钉钉自定义流程图（完成）；dingding分支

echarts 地图添加点击事件显示状图（完成）； echarts分支

SelectBox穿梭框选人组件（完成）； SelectBoxCom分支

需要的同学可以按需拉取

GIT地址

仿钉钉自定义流程文档

效果图

使用方法

在需要的地方引入，例如全局引入 (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’>	–	–

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

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

前端组件集合文章
vue组件-echarts地图显示柱状图并添加点击事件文档
vue组件之仿钉钉自定义流程图组件文档
vue组件之树状选择器组件文档
最后给我的老东家打个广告，金现代企业股份有限公司做的项目真的不错，在里面带的一年里，成长很多，尤其在那里接触到了UML统一建模语言，对专业技能提升真的很大。在此感恩。