Home - zptime/blog GitHub Wiki

Ant Design 组件封装

1. 树结构数据处理之函数总汇

   (1) 代码展示

   (2) 实例演示

   (3) 文档说明

2. 单树穿梭框

   基础介绍：基于Ant Transfer稍加改造而成，左侧是省市列表，右侧仅展示城市数据

   (1) 代码展示

   (2) 实例演示

   (3) 文档说明

3. [省市]双树穿梭框

   基础介绍：仿造原组件“造轮子”，左右侧均是省市列表数据。仅支持二级的省市穿梭框：已选数据不在源数据框显示

   (1) 代码展示

   (2) 实例演示

   (3) 文档说明

4. [部门]双树穿梭框：支持部门 n 级的部门穿梭框：已选数据仍在源数据框显示，但是禁止操作，而且显示已配置

5. 列表穿梭框

   基础介绍：“造轮子”，新版 UI 穿梭框，用于职级列表。去除了中间的左右移动，直接选中右移，删除左移动；已选数据显示已配置，禁止操作；支持关键词过滤。

   (1) 代码展示

   (2) 实例演示

   (3) 文档说明

6. [organizeTransfer]组织架构穿梭框：与接口配合，实现层级查询；与接口配合，实现过滤；支持部门和成员同时选择，当前页展示直接子部门和部门成员；查询关键词高亮；操作长度省略号。

7. [compose]组织架构列表：

   (1) 部门树：添加操作栏

   (2)职级列表：操作栏

   (3)搜索列表：部门+职级+成员；分别分页查询；操作栏功能

8. [PaginationSelect]select 单选选择框：支持分页，前端分页，解决卡顿问题；过滤

9. [MultiPaginationSelect]select 多选选择框：支持分页，前端分页，解决卡顿问题；过滤

10. [MTextarea]textarea 文本框添加字数计数功能

11. [RangeTimePicker]自定义时间选择器

12. [TimePicker]自定义时间选择器

13. [MultiSwitch]switch 组件

14. [treeSelect]：部门树支持异步加载数据，结合接口；过滤查询，也要配合接口

15. Switch 中英文开关组件

组件使用

1. Ant Design FormModel 表单校验
2. 实用的 Vue.Draggable 拖拽插件
3. 实用的 vue dragging（awe dnd） 拖拽插件
4. 前端实现 HTML 转 PDF 并导出
5. 前端性能优化之重构方案和计划
6. 权限控制

基础知识

1. CSS
2. JS
3. HTML
4. 网络
5. vue
6. nodejs
7. 打包工具，webpack，gulp
8. react