前端规范文档

# 业务系统代码片段

# 基础代码片段

# 简介

基础代码片段基于ElementUI并且结合业务系统自身业务，经过长时间积累和总结以后给出的相对通用代码。基础代码片段拆分粒度很细，具有较强的通用能力，可以适用于大部分开发场景。通过使用代码片段能够大大节省编码时间，同时使用公共代码片段有助于写出规范统一的代码。如何获取代码片段

# token

f0b9bc51eb01a684c3c160f274fbda3d //更新于11/18
1

# 表单相关

# 输入框类型(template)

快捷键 描述
el-input 文字输入框
el-input-search 可搜索的输入框(监听回车事件)
el-input-number 数字输入框
el-input-textarea 文本域输入框
el-select 下拉菜单(远程获取)
el-select-local 下拉菜单(本地获取)
el-radio 单选框
el-checkbox-group 复选框
el-data-picker 日期选择器
el-data-picker-range 日期选择器(范围)
el-**-grid 带栅格效果的输入框
el-form form表单
el-form-item 表单包裹框
el-form-item-grid 带栅格效果表单包裹框
el-card-search 搜索重置(卡片包裹)

# 输入框类型(data)

快捷键 描述
el-time-gt 大于当前日期(从此刻开始算起)
el-time-gte 大于等于当前日期(从此刻开始算起)
el-time-lt 小于当前日期(从此刻开始算起)
el-time-lte 小于等于当前日期(从此刻开始算起)

# 输入框类型(watch)

快捷键 描述
el-data-picker-range-time-watch 日期选择器(范围)

TIP

针对日期范围，后台一般接受两个日期startTime(beginDate)或者endTime(endDate)，由于范围日期选择器接受一个数组变量作为参数，但是传递给后台一般为2个参数， 推荐通过 watch 监听时间变量的改变，开发者不需要单独处理change事件。同时对日期字段进行必填校验的时候只需要校验其中一个参数(startTime或者endTime)。

# 搜索片段

快捷键 描述
el-search-simple 搜索卡片
el-search-more 搜索卡片(含高级筛选)

# 表格相关

# table表格(template)

快捷键 描述
el-table 创建一个表格
el-table-pagination 创建一个带分页的表格
http-cancel-loading 存在取消上一次请求的ajax

# table表格(data)

快捷键 描述
el-table-data 表格参数

# table表格(methods)

快捷键 描述
el-table-method 表格方法
el-table-method-reset 表格方法(重置)

# 请求相关

# ajax请求(methods)

快捷键 描述
http request 常规ajax请求
http request loading 存在loading效果ajax
http-cancel-loading 存在取消上一次请求的ajax

# 对话框和提示

# 验证提交(methods)

快捷键 描述
el-submit-methods 表单验证提交
el-confirm 确认框
el-confirm-validate 确认框(有校验规则)
el-confirm-validate-ajax 完成确认框(校验，ajax)
el-validate 表单校验

# 注释相关

快捷键 描述
// 分块注释
comment 函数注释
/* 
    @description  函数描述
    @autor        shuxiaokai
    @create       2019-11-17 21:30"
    @params {String}  xxx 字符串(必填)      
    @params {String?}  xxx 字符串(非必填)      
    @params {Number}  xxx 数字     
    @params {Boolean}  xxx 布尔值     
    @params {Array<String>}  xxx 数组，元素为字符串     
    @params {Array<Number>}  xxx 字符串，元素为数字     
    @params {Array<Object>}  xxx 字符串，元素为Object     
    @params {Object}  xxx 对象    
    @return       null
*/
1
2
3
4
5
6
7
8
9
10
11
12
13
14

TIP

当前描述类型方式存在缺陷，但是能够满足目前项目使用，未来会转换为 Typescript。

# tabs切换

快捷键 描述
el-tabs tabs切换
el-tabs-data tabs切换(data)

# 其他常用代码片段

快捷键 描述
// 分块注释
log console.log
v-for vue 循环
template 表格template
el-model-template 弹窗template
el-divider 通用分隔线
el-tip 通用提示

# 组合代码片段

TIP

组合代码片段一般由许多基础代码片段组成，具备组件的完整性，扩展性较低，但是开发效率很高，，代码快捷键以 s-开头

# 弹窗(新增)

快捷键：s-model-add

描述：弹窗，新增内容。

前端样式： 弹窗(新增)

# 弹窗(curd)

快捷键：s-model-curd

描述：弹窗，简单的新增编辑删除。

前端样式： 弹窗(curd)

# 表格+搜索

快捷键：s-search-table

描述：表格+搜索。

前端样式： 表格+搜索

# 表格+搜索(含高级搜索)

快捷键：s-search-table-more

描述：表格+搜索(含高级搜索)。

前端样式： 表格+搜索