凯普顿 前端工具集合

指令

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

1. 用于设置组件内部元素的类

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:根据列定义生成默认model
• getRules:根据列定义生成表单验证规则

1. key：字段名称
2. title：字段标题
3. order: 再列表中显示的顺序
4. title：字段标题
5. default：字段默认值
6. rules：表单验证规范
7. align: 靠哪边，可选项：left,right,center
8. sortable：可排序
9. width：宽度
10. 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：是否展开

1. activeNode(treeData, id) ：激活节点 将数据次id的数据项的active属性设置为true
2. setChildren(treeData, pid, children):为某一个数据项设置children
3. checkedNode(treeData, id): 设置选择状态,同时也设置了半选中状态
4. toggleNode(treeData, id): 展开或则收缩节点 控制open字段
5. getParent(treeData, id)：获取父节点
6. 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栏显示红色的错误数量