凯普顿 前端工具集合
指令
v-grid-autosize
- iview table组件的自动适应父容器大小
v-modal-ext
- iview modal的扩展
- 支持拖动(darg)
- 支持非模态(:modal="false")
- 支持禁用esc按键(:esc-close="false")
- 参考实例:drag.html
- 需要用到实例中的样式
Modal(title="测试" v-model="visible" v-modal-ext="" :modal="false" :drag="true" :esc-close="false") Modal(title="测试" v-model="visible" v-modal-ext="{modal:false,drag:true,escClose:false}" )
v-drag
- 拖动指令
- 元素必须有定位
- options
- target - 指定拖动模板
- handler - 指定可拖动的地方
- callbacks - 回调 事件
- onDragStart - 开始拖动时 event
- onDragEnd - 拖动结束时 event,x(当前元素x坐标),y(当前元素Y坐标)
- onDrag - 正在拖动时 event ,x(当前元素x坐标),y(当前元素Y坐标)
div(v-drag="")
v-inner-class
- 用于设置组件内部元素的类
v-inner-class="{'.target':'hover'}"
插件
消息通讯插件(event-hub) 用法和vue的事件api相同
- 发布消息 this.$pub(messageType,args)
- 订阅消息 this.$sub(messageType,callback)
- 取消订阅 this.$unsub(messageType,callback)
过滤器
get
- 取属性的过滤器
{{obj | get('name')}}
代替{{obj.name}}
防止obj为空时报错- 文档请参考 https://lodash.com/docs/4.17.4#get
moment
- 日期格式过滤器 基于moment库实现
- 用法
{{new Date() | moment('YYYY-MM-DD')}}
=>2017-01-01
{{user | get('birthday') | moment(['1992-07-23'],'isBefore')}}
调用moment isBefore方法 中括号中是isBefore的参数,其他函数同理- 更多请参考 http://momentjs.com/docs/#/parsing/string-format/
工具
import {ajax,modelUtils,commonYUtils} from 'cpt-toolkit'
ajax工具
- 基于axois针对后端接口规范做的封装
- 会根据后端返回接口进行提示,如果返回FAILD标志会进行错误提示,返回其他默认不会提示。如需提示使用notify选项
- 增加了自定义提示消息配置:notifyMessage
ajax //强制提示 ajax
- 会处理登录过期跳转,默认会跳转到后端返回的location,如需自定义处理使用loginTimeoutHandler选项
//调用到端登录界面 ajaxdefaults{ window_vueInstance$store; }
modelUtils
getColumns
:根据列定义生成iviewtable列定义getDefaults
:根据列定义生成默认modelgetRules
:根据列定义生成表单验证规则
- key:字段名称
- title:字段标题
- order: 再列表中显示的顺序
- title:字段标题
- default:字段默认值
- rules:表单验证规范
- align: 靠哪边,可选项:left,right,center
- sortable:可排序
- width:宽度
- render:自定义渲染
const fields = key: 'name' showInColumn: true order: 1 title: '名称' default:'测试' rules: required: true message: '请填写地域名称' //表单验证规则
commmonUtils
recurseData
:递归处理数据,最小单元为原始类型的数据
//将对象中日期的字段进行格式化commmonUtils//--> name: 'cpt' birthday: '1980-01-01' child: name: 'cpt-child' birthday: '2005-01-01'
recurseItem
:递归处理对象,最小单元为json对象
// 将所有菜单项的open属性设置为truelet menus= name:'类型'children: name:'苹果' name:'苹果华为' commmonUtils//--> name:'类型'open:truechildren: name:'苹果'open:true name:'苹果华为'open:true
- uuid 生成uuid
domUtils
- addClass(el,classNames) 增加类
- removeClass(el,classNames) 移除类
- getSize(el) 获取元素 宽高,隐藏的元素也可以获取
- triggerResize 触发windows resize事件
treeUtils
- 说明
- 处理树型数据的相关逻辑
- 有关控制树状态的字段
- active:是否市激活状态,就是当前选择的节点
- checked:是否是选择状态
- indeterminate:子级节点有选中的
- open:是否展开
- activeNode(treeData, id) :激活节点 将数据次id的数据项的active属性设置为true
- setChildren(treeData, pid, children):为某一个数据项设置children
- checkedNode(treeData, id): 设置选择状态,同时也设置了半选中状态
- toggleNode(treeData, id): 展开或则收缩节点 控制open字段
- getParent(treeData, id):获取父节点
- recurseNodes(data, callback):遍历所有数据项, callback是回掉函数
enhance-comp
- 增加vue组件 主要是实现切面编程的功能
expor default
组件
布局
- column-layout:列布局 左右支持5列,中间自适应
- row-layout:行布局 上下支持5行
- page-layout:页面布局 分上中下,上又分为左右左边一般作为title区域,右边作为工具栏,下边分页栏等
图片查看器
- 可拖动,缩放
<image-view src="./a.png" />
复杂表格
- 支持复杂表头
- 支持汇总栏
- 增加fixHeight 在自适应的基础上调整高度
- 扩展了column 配置renderSummary 用法和render相同 不同的是renderSummary的数据是summaryData
`
面板组件
cpt-panel span(slot="head") 收件列表 ....
form-tab组件
- 用于垂直选项卡
- 对应子组件的form-tab-panel
form-tab(v-model="tab") form-tab-pane(label="承包方信息" name="cbfxx" :errorCount="1") errorCount 代表错误数量,会在tab栏显示红色的错误数量