0.0.23 • Published 6 years ago
cpt-toolkit v0.0.23
凯普顿 前端工具集合
指令
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.post(urls.save,data,{notify:true,notifyMessage:'自定义提示消息'}) //强制提示 ajax.post(urls.save,data,{notify:true})
- 会处理登录过期跳转,默认会跳转到后端返回的location,如需自定义处理使用loginTimeoutHandler选项
//调用到端登录界面 ajax.defaults.loginTimeoutHandler = (location)=>{ window._vueInstance.$store.dispatch('account/logout'); }
- 其他用法请参考 https://github.com/mzabriskie/axios
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.recurseData( { name: 'cpt', birthday: new Date(1980, 1, 1), child: { name: 'cpt-child', birthday: new Date(2005, 1, 1) } },(value,key)=>{ if(is.date(value)){ return moment(value).format('YYYY-MM-DD'); } return value; } ) //--> { name: 'cpt', birthday: '1980-01-01', child: { name: 'cpt-child', birthday: '2005-01-01' } }
recurseItem
:递归处理对象,最小单元为json对象// 将所有菜单项的open属性设置为true let menus=[ { name:'类型',children:[ {name:'苹果'}, {name:'苹果华为'} ] } ] commmonUtils.recurseItem(menus,menu=>{ menu.open=true; return menu; }) //--> [ { name:'类型',open:true,children:[ {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 enhance({
methods:{
test(){
}
},
aspects:{
beforeTest(arg){//test执行之前,arg是test的参数
},
afterTest(res,arg){//test执行之后,如果test返回Promise 则会在解析完之后执行,res是test的返回结果,arg是test的参数
}
}
})
组件
布局
- column-layout:列布局 左右支持5列,中间自适应
<column-layout> <div slot="left1"></div> <div></div> <div slot="right1"></div> </column-layout>
- row-layout:行布局 上下支持5行
<row-layout> <div slot="top1"></div> <div></div> <div slot="bottom1"></div> </row-layout>
- page-layout:页面布局 分上中下,上又分为左右左边一般作为title区域,右边作为工具栏,下边分页栏等
<page-layout> <div slot="top-left"></div> <div slot="top-right"></div> <div></div> <div slot="bottom"></div> </page-layout>
图片查看器
- 可拖动,缩放
<image-view src="./a.png" />
复杂表格
- 支持复杂表头
- 支持汇总栏
- 增加fixHeight 在自适应的基础上调整高度
- 扩展了column 配置renderSummary 用法和render相同 不同的是renderSummary的数据是summaryData
<complex-table ref="table",:columns="columns",:data="data" :summaryData="summaryData" :fixHeight="60" /> <complex-table :columns="columns" :data="data" />`
面板组件
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栏显示红色的错误数量
0.0.23
6 years ago
0.0.22
6 years ago
0.0.21
7 years ago
0.0.20
7 years ago
0.0.19
7 years ago
0.0.18
7 years ago
0.0.17
7 years ago
0.0.16
7 years ago
0.0.15
7 years ago
0.0.14
7 years ago
0.0.13
7 years ago
0.0.12
7 years ago
0.0.11
7 years ago
0.0.10
7 years ago
0.0.9
7 years ago
0.0.8
7 years ago
0.0.7
7 years ago
0.0.6
7 years ago
0.0.2
7 years ago