# mobile-admin

**Repository Path**: lizheng2000/mobile-admin

## Basic Information

- **Project Name**: mobile-admin
- **Description**: 打卡系统后台
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2022-05-11
- **Last Updated**: 2022-05-31

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 用Vue封装业务组件 vue-pro-component

### 项目启动
cnpm run serve

------

### 实际需求

封装业务组件是将一些复用性高的代码进行封装，可以有效的减少代码冗余，方便维护升级。

之所以想要自己封装一个业务组件，是因为前阵子在做项目时遇到了一个**表单提交数据格式需要强制转换**的问题。后端确定了一些数据的格式为int、float，而前端已经将一些组件封装好了，无法再挨个给el-input组件增加v-model.number，所以给后端传值时只能一个一个地强制转换。由于相同业务的页面非常多，导致出现了大量的强制转换数据类型的代码，于是想要将element-ui的表单组件进一步封装来实现该业务。总之就是**失败的组件封装导致代码维护困难**。

由于该项目已经踩了坑，所以**建议大家以后封装组件不要过度封装**，否则后期代码维护会十分困难。

------

### 组件化与模块化
模块化：是从代码逻辑的角度进行分析，方便代码分层开发，保证每个功能模块的职能单一

组件化：是从UI界面的角度进行划分，前端的组件化，方便UI组件的重用。

### 组件分类

- 通用组件
  - 基础组件，大部分UI都是这种组件，比如表单 布局 弹窗
- 业务组件
  - 与需求挂钩，会被复用
- 页面组件
  - 每个页面都是一个组件，不会复用

------

#### fields的属性

| 参数         | 说明                                      | 类型                       | 默认值  |
| :----------- | ----------------------------------------- | -------------------------- | ------- |
| title        | 表单名称                                  | String                     | ''      |
| key          | 表单字段                                  | String                     | ''      |
| type         | 表单类型                                  | input、select、radio...    | 'input' |
| dataType     | 数据类型                                  | String\|Int\|Float         | String  |
| options      | 当表单元素位select、radio、checkbox时使用 | []{ label: '', value: '' } | []      |
| defaultValue | 表单元素的默认值                          | String\|Number\|Array      |         |
| props        | 用来接受element原始表单所有属性           | Object                     |         |

#### 其它参数
| 参数       | 说明                 | 类型    | 默认值 |
| ---------- | -------------------- | ------- | ------ |
| fields     | 见上方               | Array   | []     |
| hasControl | 控制表单按钮显示隐藏 | Boolean | true   |
| submitText | 提交按钮显示文本     | String  | '提交' |
| resetText  | 重置按钮显示文本     | String  | '重置' |

------

#### 补充

vscode注释高亮插件-Better Comments

项目演示地址：https://www.dingmao.design