# DK-UI

**Repository Path**: dawn_king/dk-ui

## Basic Information

- **Project Name**: DK-UI
- **Description**: 一套由黑白灰三色为基调的简约组件库
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2023-06-13
- **Last Updated**: 2023-08-16

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# dk-ui

## 前言
```
本组件库是一套由黑白灰三色为基调的简约组件库。
```

## 基础组件

***
### container组件
**创建时间:2023/06/23**
> 容器父组件，采用flex布局，对页面进行整体的布局

***属性***
|属性名    |属性描述    |类型    |可选值    |默认值    |
| :--     | :--    | :--    | :--    | :--    |
|direction|容器方向|String|vertical(垂直)/horizontal(水平)|vertical |

更新日志
+ 属性
> ---23/06/23---
>> + direction:容器方向

***
### header组件
**创建时间:2023/06/23**
> 容器组件之一，header主要使用于页头
> 
***属性***
|属性名    |属性描述    |类型    |可选值    |默认值    |
| :--     | :--    | :--    | :--    | :--    |
|height|高度|String/Number| -- | -- |

更新日志
+ 属性
> ---23/06/23---
>> + height:设置高度

***
### footer组件
**创建时间:2023/06/23**
> 容器组件之一，footer主要使用于页尾
> 
***属性***
|属性名    |属性描述    |类型    |可选值    |默认值    |
| :--     | :--    | :--    | :--    | :--    |
|height|高度|String/Number| -- | -- |

更新日志
+ 属性
> ---23/06/23---
>> + height:设置高度

***
### aside组件
**创建时间:2023/06/23**
> 容器组件之一，aside主要使用于侧边导航栏
> 
***属性***
|属性名    |属性描述    |类型    |可选值    |默认值    |
| :--     | :--    | :--    | :--    | :--    |
|width|宽度|String/Number| -- | -- |

更新日志
+ 属性
> ---23/06/23---
>> + width:设置宽度

***
### main组件
**创建时间:2023/06/23**
> 容器组件之一，main主要用于主要显示区域

***
### row组件
**创建时间:2023/06/23**
> 布局组件之一，用于表示行
> 
***属性***
|属性名    |属性描述    |类型    |可选值    |默认值    |
| :--     | :--    | :--    | :--    | :--    |
|gutter|间距，会传递给子组件col|Number| -- | -- |

更新日志
+ 属性
> ---23/06/23---
>> + gutter:间距

***
### col组件
**创建时间:2023/06/23**
> 布局组件之一，用于表示列，采用24栏布局
> 
***属性***
|属性名    |属性描述    |类型    |可选值    |默认值    |
| :--     | :--    | :--    | :--    | :--    |
|span|占位格子数 X/24的比例|Number| -- | -- |
|push|向左位移的格子数|Number| -- | -- |
|pull|向右位移的格子数|Number| -- | -- |
|offset|左侧空开的格子数|Number| -- | -- |

更新日志
+ 属性
> ---23/06/23---
>> + span:占位格子数
>> + push:向左位移的格子数
>> + pull:向右位移的格子数

> ---23/06/23---
>> + offset:左侧空开的格子数

***
### Button组件
**创建时间:2023/06/13**
> 按钮组件，其中加入了点击动画，经过动画
> 
***属性***
|属性名    |属性描述    |类型    |可选值    |默认值    |
| :--     | :--    | :--    | :--    | :--    |
|plain|朴素样式|Boolean| -- | false |
|round|圆角样式|Boolean| -- | false |
|circle|圆样式|Boolean| -- | false |
|disHover|禁用hover|Boolean| -- | false |
|size|按钮尺寸|String| small/middle/big/super | middle |
|border|显示边框|Boolean| -- | false |
|diabled|禁用|String| -- | false |
|clickAnimation|点击动画|Array| wave/scale/rescale/taiji | -- |
|hoverAnimation|经过动画|Array| dark/light | -- |


更新日志
+ 属性
> ---23/06/13---
>> + plain:朴素,外边框深色，内部浅色
>> + round:圆角
>> + circle:圆
>> + disHover:禁用hover效果
>> + clickAnimation:点击动画配置。wave/scale/rescale

> ---23/06/14---
>> + size:设置尺寸 
>> + clickAnimation:新增太极旋转效果。taiji
>> + clickHandler:点击事件绑定

> ---23/06/15---
>> + border:带边框 
>> + disabled:禁用

> ---23/06/30---
>> + hoverAnimation:经过动画配置。dark/light

***
### Link组件
**创建时间:2023/06/19**
> 链接组件，封装a标签
> 
***属性***
|属性名    |属性描述    |类型    |可选值    |默认值    |
| :--     | :--    | :--    | :--    | :--    |
|diabled|禁用|String| -- | false |
|underline|下划线样式|String| line/toright/toleft/none | -- |
|href|原生href|String| -- | -- |
|hoverEffect|hover效果|String| hollow | -- |

更新日志
+ 属性
> ---23/06/19---
>> + disabled:禁用
>> + underline:下划线样式.line/toright/toleft
>> + href:同原生href

> ---23/06/27---
>> + underline:新增none样式
>> + hoverEffect:触摸效果。hollow(镂空效果)

***
## 表单组件

***
### Form组件
**创建时间:2023/06/20**
> 表单组件
> 
***属性***
|属性名    |属性描述    |类型    |可选值    |默认值    |
| :--     | :--    | :--    | :--    | :--    |
|model|数据对象|Object| -- | -- |
|labelWidth|标签宽度|String/Number| -- | -- |
|labelPosition|标签文本对齐方式|String| left/right | left |
|itemSpace|子元素间隔|String/Number| -- | -- |

更新日志
+ 属性
> ---23/06/20---
>> + model:表单数据存放对象
>> + labelWidth:标签宽度
>> + labelPosition:标签文本对齐方式

> ---23/06/20---
>> + itemSpace:子元素间隔

***
### FormItem组件
**创建时间:2023/06/20**
> 表单元素组件，配合表单组件进行表单的布局
> 
***属性***
|属性名    |属性描述    |类型    |可选值    |默认值    |
| :--     | :--    | :--    | :--    | :--    |
|label|标签名|String| -- | -- |

更新日志
+ 属性
> ---23/06/20---
>> + label:标签的名称

### Radio组件
**创建时间:2023/06/14**
> 单选框组件
> 
***属性***
|属性名    |属性描述    |类型    |可选值    |默认值    |
| :--     | :--    | :--    | :--    | :--    |
|label|相当于radio的value|String/Number/Boolean| -- | -- |
|name|相当于radio的name|String| -- | -- |
|size|尺寸|String| small/middle/big/super | small |
|shape|形状|String| rect/radius/circle | rect |

***事件***
|属性名    |属性描述    |类型    |可选值    |默认值    |
| :--     | :--    | :--    | :--    | :--    |
|clickHandler|点击事件| -- | -- | -- |

更新日志
+ 属性
> ---23/06/14---
>> + label:相当于radio的value
>> + name:相当于radio的name,无实际用处
>> + size:设置尺寸
>> + shape:形状

> ---23/06/15---
>> + border:边框
>> + disabled:禁用
>> + type:类型样式。radio/text

+ 事件
> ---23/06/28---
>> + clickHandler:点击事件

***
### RadioGroup组件
**创建时间:2023/06/15**
> 表单组组件
> 
***属性***
|属性名    |属性描述    |类型    |可选值    |默认值    |
| :--     | :--    | :--    | :--    | :--    |
|v-model|数据绑定，会获取插槽选中的单选框的值|String/Number/Boolean| -- | -- |

更新日志
+ 属性
> ---23/06/15---
>> + v-model:用于绑定数据,会取到插槽中选中的单选框的值
实现逻辑,利用provide将modelValue的值引用并封装修改方法到对象中传给radio,
radio根据是否有传值来选择独立选择表现形式和表现为group中的值

***
### CheckBox组件
**创建时间:2023/06/16**
> 多选选框组件
> 

更新日志
+ 属性
> ---23/06/16---
>> + 用法同radio

***
### CheckBoxGroup组件
**创建时间:2023/06/16**
> 多选选框组件
> 

更新日志
+ 属性
> ---23/06/16---
>> + 用法同radioGroup

***
### Input组件
**创建时间:2023/06/19**
> 输入框组件
> 
***属性***
|属性名    |属性描述    |类型    |可选值    |默认值    |
| :--     | :--    | :--    | :--    | :--    |
|type|同原生type|String| text/textarea | text |
|placeholder|同原生placeholder|String| -- | -- |
|disabled|禁用|Boolean| -- | false |
|readonly|只读|Boolean| -- | false |
|inputStyle|input的样式|Object| -- | -- |
|autofocus|原生属性autofocus|Boolean| -- | false |
|name|原生属性name|String| -- | -- |
|form|原生属性form|String| -- | -- |
|rows|原生属性rows,仅textarea有效|String/Number| -- | -- |
|max|最大值,仅number有效|Number| -- | Number.MAX_SAFE_INTEGER |
|min|最小值,仅number有效|Number| -- | -Number.MAX_SAFE_INTEGER |
|maxlength|最大输入长度|Boolean/String/Number| -- | -- |
|minlength|最小输入长度|Number| -- | 0 |

***事件***
|属性名    |属性描述    |类型    |可选值    |默认值    |
| :--     | :--    | :--    | :--    | :--    |
|blur|失去焦点事件| -- | -- | -- |
|focus|获取焦点事件| -- | -- | -- |
|change|改值事件| -- | -- | -- |
|input|输入事件| -- | -- | -- |

更新日志
+ 属性
> ---23/06/19---
>> + type:同原生type
>> + placeholder:同原生placeholder
>> + disabled:禁用
>> + readonly:只读
>> + inputStyle:input的样式
>> + autofocus:原生属性autofocus
>> + name:原生属性name
>> + form:原生属性form
>> + rows:原生属性rows textarea有效
>> + max:最大值 number有效
>> + min:最小值 number有效

> ---23/06/20---
>> + maxlength:最大输入长度
>> + minlength:最小输入长度

+ 事件
> ---23/06/19---
>> blur:失去焦点事件
>> focus:获取焦点事件
>> change:改值事件
>> input:输入事件

***
### switch组件
**创建时间:2023/06/21**
> 开关组件
> 
***属性***
|属性名    |属性描述    |类型    |可选值    |默认值    |
| :--     | :--    | :--    | :--    | :--    |
|v-model|数据绑定|Object| -- | -- |
|disabled|禁用|Boolean| -- | false |

***事件***
|属性名    |属性描述    |类型    |可选值    |默认值    |
| :--     | :--    | :--    | :--    | :--    |
|clickHandler|点击事件| -- | -- | -- |

更新日志
+ 属性
> ---23/06/21---
>> + v-model:数据绑定
>> + disabled:禁用

+ 事件
> ---23/06/28---
>> clickHandler:点击事件

***
## 数据组件

***
### tag组件
**创建时间:2023/06/15**
> 标签组件
> 
***属性***
|属性名    |属性描述    |类型    |可选值    |默认值    |
| :--     | :--    | :--    | :--    | :--    |
|size|尺寸|String| small/middle/big/super | -- |
|effect|样式效果|String| default/dark/plain | default |
|close|开启关闭按钮|Boolean| -- | false |

***事件***
|属性名    |属性描述    |类型    |可选值    |默认值    |
| :--     | :--    | :--    | :--    | :--    |
|clickHandler|点击回调| -- | -- | -- |
|closeHandler|关闭回调| -- | -- | -- |

更新日志
+ 属性
> ---23/06/15---
>> + size:设置尺寸
>> + effect:设置样式。default/dark/plain
>> + close:添加删除按键

+ 事件
> ---23/06/28---
>> clickHandler:点击回调
>> closeHandler:关闭回调

***
### progress组件
**创建时间:2023/06/16**
> 进度条组件
> 
***属性***
|属性名    |属性描述    |类型    |可选值    |默认值    |
| :--     | :--    | :--    | :--    | :--    |
|percentage|进度显示，0-100|Number| -- | -- |
|height|设置进度条高度|Number| -- | -- |
|showLabel|显示文本|String| -- | -- |
|labelPosition|文本显示位置|String| outer/inner | outer |

更新日志
+ 属性
> ---23/06/16---
>> + percentage:进度显示
>> + height:设置进度条高度
>> + showLabel:展示文本内容
>> + labelPosition:文本显示位置。outer/inner

***
### table组件
**创建时间:2023/06/24**
> 表格组件
> 
***属性***
|属性名    |属性描述    |类型    |可选值    |默认值    |
| :--     | :--    | :--    | :--    | :--    |
|data|表格数据|Array| -- | -- |
|height|设置表体高度|String/Number| -- | -- |
|maxHeight|限制表体的高度|String/Number| -- | -- |
|showHeader|表头显示|Boolean| -- | true |
|stripe|斑马纹|Boolean| -- | false |

更新日志
+ 属性
> ---23/06/24---
>> + data:表格数据
>> + height:设置表体高度
>> + maxHeight:限制表体的高度
>> + showHeader:表头显示
>> + stripe:斑马纹

***
### tablecolumn组件
**创建时间:2023/06/24**
> 表格子元素组件
> 
***属性***
|属性名    |属性描述    |类型    |可选值    |默认值    |
| :--     | :--    | :--    | :--    | :--    |
|prop|显示数据的变量名|String| -- | -- |
|label|显示名称|String| -- | -- |
|width|列宽|Number| -- | -- |

更新日志
+ 属性
> ---23/06/24---
>> + prop:显示数据的变量名
>> + label:显示名称
>> + width:列宽

***
## 导航组件

***
### menu组件
**创建时间:2023/06/25**
> 菜单组件
> 
***属性***
|属性名    |属性描述    |类型    |可选值    |默认值    |
| :--     | :--    | :--    | :--    | :--    |
|route|vue-router对象,避免菜单子元素反复使用|Object| -- | -- |

更新日志
+ 属性
> ---23/06/24---
>> + route:vue-router对象

***
### menuItem组件
**创建时间:2023/06/25**
> 菜单组件
> 
***属性***
|属性名    |属性描述    |类型    |可选值    |默认值    |
| :--     | :--    | :--    | :--    | :--    |
|config|配置数组|Array| small/big/middle/base/title | -- |
|index|路由跳转路径|String| -- | -- |
|itemStyle|元素样式|Object| -- | -- |

更新日志
+ 属性
> ---23/06/25---
>> + config:配置数组,small/big/middle/base/title
> ---23/06/26---
>> + index:路由跳转路径
> ---23/06/30---
>> + itemStyle:子元素li的样式

***
## 其他组件

***
### divider组件
**创建时间:2023/06/15**
> 分割线组件
> 
***属性***
|属性名    |属性描述    |类型    |可选值    |默认值    |
| :--     | :--    | :--    | :--    | :--    |
|contentPostion|插槽位置|String| left/center/right | left |
|gradient|路由跳转路径|String| white-black/black-white | -- |
|height|分割线高度|String/Number| -- | -- |

更新日志
+ 属性
> ---23/06/25---
>> + contentPostion:插槽位置。left/center/right
>> + gradient:渐变。white-black/black-white
> ---23/06/28---
>> + height:分割线高度

***
### timeline组件
**创建时间:2023/06/20**
> 时间线组件
> 

***
### timelineItem组件
**创建时间:2023/06/20**
> 时间线子元素组件
> 
***属性***
|属性名    |属性描述    |类型    |可选值    |默认值    |
| :--     | :--    | :--    | :--    | :--    |
|timestamp|时间戳|String| -- | -- |
|position|时间位置|String| top/bottom | bottom |
|hideTimestamp|隐藏时间戳|Boolean| -- | false |

更新日志
+ 属性
> ---23/06/20---
>> + timestamp:时间戳
>> + position:时间位置。top/bottom
>> + hideTimestamp:隐藏时间戳

***
### card组件
**创建时间:2023/06/21**
> 卡片组件
> 
***属性***
|属性名    |属性描述    |类型    |可选值    |默认值    |
| :--     | :--    | :--    | :--    | :--    |
|bodyStyle|body样式|Object| -- | -- |
|hideHeader|隐藏header插槽|Boolean| -- | false |
|hideFooter|隐藏footer插槽|Boolean| -- | false |
|borderType|边框类型|String| shdow/border/leftborder/rightborder/topborder/bottomborder | shdow |

***插槽***
|属性名    |属性描述    |类型    |可选值    |默认值    |
| :--     | :--    | :--    | :--    | :--    |
|header|头部插槽|--| -- | -- |
|footer|底部插槽|--| -- | -- |

更新日志
+ 属性
> ---23/06/21---
>> + bodyStyle:卡片body的样式

> ---23/06/26---
>> + hideHeader:隐藏header插槽
>> + hideFooter:隐藏footer插槽

> ---23/06/30---
>> + borderType:边框类型。shdow/border/leftborder/rightborder/topborder/bottomborder

***
### code组件
**创建时间:2023/06/27**
> 代码块组件
> 
***属性***
|属性名    |属性描述    |类型    |可选值    |默认值    |
| :--     | :--    | :--    | :--    | :--    |
|lang|语言类型|String| java/javascript | -- |
|code|代码文本|String| -- | -- |

更新日志
+ 属性
> ---23/06/27---
>> + lang:语言类型。java/javascript
>> + code:代码文本