# dComponent

**Repository Path**: lsmhq/dComponent

## Basic Information

- **Project Name**: dComponent
- **Description**: 组件库
- **Primary Language**: JavaScript
- **License**: MulanPSL-2.0
- **Default Branch**: master
- **Homepage**: https://gitee.com/lsmhq/dComponent
- **GVP Project**: No

## Statistics

- **Stars**: 4
- **Forks**: 0
- **Created**: 2021-11-01
- **Last Updated**: 2023-11-30

## Categories & Tags

**Categories**: Uncategorized

**Tags**: React, hooks, 组件

## README

# 使用说明 --- V1.0.14

***
## 实战例子
antd + 部分本仓库组件 = [地址](https://gitee.com/lsmhq/carpool-front-end-project)
## 版本说明

- V1.0.1 新增表单验证，及自定义表单验证规则暂时只支持正则，还不可自定义函数校验

- V1.0.2 重写表单验证，修改上一版本如果出现嵌套结构的情况无法验证的bug，使用Context重写

- V1.0.3 使用useContex和useReducer结合，实现了类似Redux的功能

- V1.0.4 添加Slide组件-半成品

- V1.0.5 添加Process-开发中和Audio组件-开发中

- V1.0.6 放弃setInterval改用requestAnimationFrame

- V1.0.7 新增Video组件-开发中

- V1.0.8 修改Form里越级嵌套无法准确校验的bug

- V1.0.9 Video的控制栏显隐优化，添加video的全屏及音量控制， 修改进度条部分props

- V1.0.10 添加Table组件

- V1.0.11 修改轮播图末尾项下一页和首项上一页问题

- V1.0.12 添加ContextMenu组件

- V1.0.13 添加侧边导航二级菜单功能

- V1.0.14 添加文字提示组件

- V1.0.15 添加Tabs标签组件

***

## 开发中······

[示例地址](https://lsmhq.gitee.io/dcomponent)

***

## Button-按钮

参数名|数据类型|默认值及使用|作用
-|-|-|-
onClick | function | - |点击事件
cls | string| '' | 自定义className
clear|bool|传true变透明| 背景色
style|object| |自定义行内样式
size|string| defalut / lg / sm / md | 内置尺寸
type|string| defalut | 类型
dashed|bool| false | 边框虚线
solid|bool|  true  | 边框实线
disable|bool| false | 禁用

<!-- ### 使用示例
```
    
``` -->
***

## Modal-弹窗

参数名|数据类型|默认值及使用|作用
-|-|-|-
title|string| ----|标题
show|bool| false |控制显隐
buttons|array|[ ]|底部的按钮
cls|string|''|自定义calssName
target|object|document.body|弹窗的容器
close|function|function|关闭回调
style|object|{}|样式
fps|string|high|帧率
draggable|bool|false|是否可拖拽
***

## Card-卡片

参数名|数据类型|默认值及使用|作用
-|-|-|-
title| string || 标题
onClick| function|----| 点击事件
list| array|[ ]| 列表数据
headerStyle|object|{}| header的样式
bodyStyle|object|{}| body的样式
canOc|bool|false| 是否能够关闭展开
open|bool|false| 默认初始是打开
***

## Form-表单-开发中

统一参数名|数据类型|默认值及使用|作用
-|-|-|-
onChange|-|-|-
maxLength|-|-|-
width|-|-|-
style|-|-|-
defalutValue|-|-|-
placeholder|-|-|-

### Filed 表单项

特殊参数名|数据类型|默认值及使用|作用
-|-|-|-
checkRules|object|null|检测规则，不传则不校验
label|string|''|label名
labelWidth|number|150|label宽度
name|string|''|绑定的变量名

### TextArea-文本框

特殊参数名|数据类型|默认值及使用|作用
-|-|-|-
count|-|-|-
countText|-|-|-

### Input-输入框

特殊参数名|数据类型|默认值及使用|作用
-|-|-|-
defaultValue|-|-|-
onChange|-|-|-

***

## List-无限滚动

参数名|数据类型|默认值及使用|作用
-|-|-|-
onBottom|function|-|当滚动到底部回调
style|object|{}|样式
***

## Loading-加载遮罩

参数名|数据类型|默认值及使用|作用
-|-|-|-
tips|string|马上赶到|提示文字
visible|bool|false|控制显隐
opacity|float|0.6|遮罩层透明度
***

## Nav-导航

参数名|数据类型|默认值及使用|作用
-|-|-|-
navList|array < object >|[ ]|数据
menuState|bool|true|开关状态
width|number|''|宽度
setMent|function|改变开关状态|设置状态
title|string|---|标题
showSwitch|bool|true|是否显示开关
replace|bool|true|控制菜单跳转方式
***

## Toast-吐司

方法名|作用|参数
-|-|-
info|提示|[ content:文本信息, option:配置信息 ]
warn|警告|[ content:文本信息, option:配置信息 ]
error|报错|[ content:文本信息, option:配置信息 ]
success|成功|[ content:文本信息, option:配置信息 ]

### option参数介绍

元素名|作用|默认值
-|-|-
delay|延迟隐藏时间，单位(ms)|2000
onHide|消失之后的回调函数|function
position|定位-开发中|string <'top' 'bottom'>
animate|动画样式-开发中|string
style|toast的样式-开发中|object
***

## Redux介绍

利用useContex共享数据和dispatch，并使用useReducer创建一个控制数据的方法，action是产生动作的类，支持create、delete、upDate三种操作。

方法名|参数|作用
-|-|-
create|key,value|为Store里创建一个名key值为value的元素
delete|key|根据key值删除掉元素
upDate|key,value|原理和create一样，两方法可混用
***

## Slide-轮播

参数|数据类型|作用
-|-|-
delay|number|自动播放情况下周期
autoPlay|bool|是否开启自动播放
<!-- upDate|key,value|原理和create一样，两方法可混用 -->

## Process-进度条

参数|数据类型|作用
-|-|-
total|any|总时长 单位:ms
current|any|当前已播放时长 单位:ms
disable|bool|false
showTime|bool|true 是否显示文本

## Audio-音频

参数|数据类型|作用
-|-|-
src|any|文件源
autoPlay|bool|是否自动播放
title|string|标题
next|function|下一个操作
avator|string|海报封面

## Video-视频

参数|数据类型|作用
-|-|-
src|any|文件源
autoPlay|bool|是否自动播放
title|string|标题
next|function|下一个操作

## Table-表格

参数|数据类型|作用|默认值
-|-|-|-
dataSource|array< object>|数据源|[]
columns|array< object>|表格列配置|[]
loading|bool|加载层|false
tips|string|加载提示|'加载中'
totalCount|number|总数|0
pageSize|number|每页展示量|10
nextPage|func|当前往下一页触发|
prvePage|func|当前往上一页触发|
jumpPage|func|当跳转页触发
pageChange|func|page改变之后触发|function(pageNumber){}
showIndex|bool|是否显示序号|false
selectChange|function|选择行数据变化时触发|function(rows){}
selectable|bool|是否允许选择行|true

### columns-表格列配置

元素|数据类型|作用|默认值
-|-|-|-
name|string|表头名称|''
key|string|取值的关键字|''
customize|function|根据函数返回的JSX自定义显示内容|()=>{return null}
width|string|列宽|''
flex|float|flex布局比重|1
style|object|列样式|{}


## ContextMenu-右键菜单

参数|数据类型|作用|默认值
-|-|-|-
menus|Array|每个菜单项数据|[{...menuItem}]

### menuItem-菜单项配置
参数|数据类型|作用|默认值
-|-|-|-
name|String|菜单名称|null
children|Array|子菜单项|[]
onclick|func|菜单项点击事件|()=>{}

## ToolTips
参数|数据类型|作用|默认值
-|-|-|-
content|String|内容|''


## Tabs
参数|数据类型|作用|默认值
-|-|-|-
activeKey|any|判断应该显示哪个tabPanel|无
onChange|Function|activeKey改变事件|function(key){}

### Tabs.TabPanel
参数|数据类型|作用|默认值
-|-|-|-
align|String|横向对齐方式|''
justify|String|纵向对齐方式|''
title|String|根据title生成标题目录|无
id|any|和Tabs的activeKey对应|无