c7-ui 组件 ​

1. 介绍 ​

基于 vue3+ ts+ Element-plus 二次封装组件

2. 组件介绍 ​

2.1. Hook ​

封装常用hook

2.1.1 tableHook ​

对表格的常用方法的封装

2.2 组件 ​

2.2.1 c7-button组件 ​

对button 组件的封装, 在不对其原有功能的影响下,增加了 事件的触发,分为

• 增加api参数和params参数实现对后端接口的触发
• 对前端事件的触发
• 增加href 参数实现路由跳转
• 放重复和点击的防抖

2.2.2 c7-select 下拉选择器 ​

对select 组件的封装, 在不对其原有功能的影响下,增加了

• 增加api参数和params参数实现对后端接口的触发
• 增加dictType(代码类型)参数,可以直接实现获取代码字典的下拉
• 增加dictData参数实现对 数据的下拉(静态数据)

2.2.3 c7-cascader 级联多选器 ​

对cascader 组件的封装, 在不对其原有功能的影响下,增加了

• 增加api参数和params参数实现对后端接口的触发
• 当数据为远程加载的时候,自动实现对数据的反显

2.2.4 c7-upload 文件上传组件 ​

对文件上传进行封装,实现

• 对文件格式、大小进行限制

2.2.5 c7-preview 文件预览组件 ​

对文件预览进行封装,实现

• 针对文件的格式自动分析进行预览

2.2.6 c7-table 表格组件 ​

对表格进行封装,实现

• 基于json 对表格内容进行展示
• 增加卡槽机制对 可以对表格内容进行自定义
• 增加字段formater 可以对表格的列进行处理
• 增加api参数和params参数实现对后端接口的触发
• 列增加类型,
  • dict 当为dict并且指定dictType的时候, 自动翻译字典值
  • image 当为image的时候,预览图片

2.2.7 c7-tree 树形组件 ​

对树形组件进行封装,实现

• 增加api参数和params参数实现对后端接口的触发
• 实现对tree内容的回显和其他方法的触发

2.2.8 c7-search 搜索组件 ​

对搜索的内容进行封装,实现

• 基于json的配置
• 列增加类型
  • select 当为select的时候,实现对select的下拉框, 下拉指定dictType的时候, 显示字典值
  • date 当为date的时候,实现对日期的格式化
  • datetime 当为datetime的时候,实现对日期时间的格式化

2.2.9 c7-title组件 ​

标题组件

2.2.10 c7-care组件 ​

对el-card 组件进行扩展,增加 展开和收回功能

2.2.11 弹框组件 ​

2.2.12 页面切换组件 ​

2.2.13 字典tag组件 ​

待完成 ​

• 将上面的组件全部改为 ts语法