凯普顿前端工具集合

指令

$3

* iview table组件的自动适应父容器大小

$3

* iview modal的扩展
* 支持拖动(darg)
* 支持非模态(:modal="false")
* 支持禁用esc按键(:esc-close="false")
* 参考实例：drag.html
* 需要用到实例中的样式
``

pug

    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}" )





$3

  * 拖动指令

  * 元素必须有定位

  * options

    * target - 指定拖动模板

    * handler - 指定可拖动的地方

    * callbacks - 回调 事件

      * onDragStart - 开始拖动时 event

      * onDragEnd - 拖动结束时 event,x（当前元素x坐标）,y（当前元素Y坐标）

      * onDrag - 正在拖动时 event ,x（当前元素x坐标）,y（当前元素Y坐标）

pug

    div(v-drag="")



$3

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



v-inner-class="{'.target':'hover'}"





插件

$3

  * 发布消息 this.$pub(messageType,args)

  * 订阅消息 this.$sub(messageType,callback)

  * 取消订阅 this.$unsub(messageType,callback)



过滤器

$3

  * 取属性的过滤器

  *

{{obj | get('name')}}代替{{obj.name}}

 防止obj为空时报错

  * 文档请参考 https://lodash.com/docs/4.17.4#get



$3

  * 日期格式过滤器 基于moment库实现

  * 用法

{{new Date() | moment('YYYY-MM-DD')}} => 2017-01-01

 调用moment isBefore方法 中括号中是isBefore的参数，其他函数同理

  * 更多请参考 http://momentjs.com/docs/#/parsing/string-format/





工具

import {ajax,modelUtils,commonYUtils} from 'cpt-toolkit'



$3

  * 基于axois针对后端接口规范做的封装

   会根据后端返回接口进行提示,如果返回FAILD标志会进行错误提示，返回其他默认不会提示。如需提示使用notify*选项

  * 增加了自定义提示消息配置：notifyMessage

javascript

     ajax.post(urls.save,data,{notify:true,notifyMessage:'自定义提示消息'})

    //强制提示

    ajax.post(urls.save,data,{notify:true})



   会处理登录过期跳转,默认会跳转到后端返回的location,如需自定义处理使用loginTimeoutHandler*选项

javascript

    //调用到端登录界面

    ajax.defaults.loginTimeoutHandler = (location)=>{

      window._vueInstance.$store.dispatch('account/logout');

    }



  * 其他用法请参考 https://github.com/mzabriskie/axios





$3

  *

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：自定义渲染

javascript

    const fields = [

      {

        key: 'name',

        showInColumn: true,

        order: 1,

        title: '名称',

        default:'测试'

        rules: [

          { required: true, message: '请填写地域名称' }//表单验证规则

        ]

      }

    ]



$3

  *

recurseData

：递归处理数据,最小单元为原始类型的数据

javascript

  //将对象中日期的字段进行格式化

  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对象

javascript

  // 将所有菜单项的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



$3

* addClass(el,classNames) 增加类

* removeClass(el,classNames) 移除类

* getSize(el) 获取元素 宽高，隐藏的元素也可以获取

* triggerResize 触发windows resize事件



$3

* 说明

  * 处理树型数据的相关逻辑

  * 有关控制树状态的字段

  * 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是回掉函数



$3

* 增加vue组件 主要是实现切面编程的功能

javascript

expor default enhance({

  methods:{

    test(){



    }

  },

  aspects:{

    beforeTest(arg){//test执行之前，arg是test的参数

    },

    afterTest(res,arg){//test执行之后，如果test返回Promise 则会在解析完之后执行,res是test的返回结果，arg是test的参数

    }

  }

})







组件

$3

  * column-layout：列布局 左右支持5列,中间自适应

html



  * row-layout：行布局 上下支持5行

html



  * page-layout:页面布局 分上中下，上又分为左右左边一般作为title区域，右边作为工具栏，下边分页栏等

html



$3

  * 可拖动，缩放

  *





$3

  * 支持复杂表头

  * 支持汇总栏

  * 增加fixHeight 在自适应的基础上调整高度

  * 扩展了column 配置renderSummary 用法和render相同 不同的是renderSummary的数据是summaryData

 html

$3

pug

    cpt-panel

      span(slot="head") 收件列表

      ....



$3

 * 用于垂直选项卡

 * 对应子组件的form-tab-panel

pug

  form-tab(v-model="tab")

    form-tab-pane(label="承包方信息" name="cbfxx" :errorCount="1") errorCount  代表错误数量，会在tab栏显示红色的错误数量

凯普顿前端工具集合

指令

$3

* iview table组件的自动适应父容器大小

$3

* iview modal的扩展
* 支持拖动(darg)
* 支持非模态(:modal="false")
* 支持禁用esc按键(:esc-close="false")
* 参考实例：drag.html
* 需要用到实例中的样式
``

pug

    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}" )





$3

  * 拖动指令

  * 元素必须有定位

  * options

    * target - 指定拖动模板

    * handler - 指定可拖动的地方

    * callbacks - 回调 事件

      * onDragStart - 开始拖动时 event

      * onDragEnd - 拖动结束时 event,x（当前元素x坐标）,y（当前元素Y坐标）

      * onDrag - 正在拖动时 event ,x（当前元素x坐标）,y（当前元素Y坐标）

pug

    div(v-drag="")



$3

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



v-inner-class="{'.target':'hover'}"





插件

$3

  * 发布消息 this.$pub(messageType,args)

  * 订阅消息 this.$sub(messageType,callback)

  * 取消订阅 this.$unsub(messageType,callback)



过滤器

$3

  * 取属性的过滤器

  *

{{obj | get('name')}}代替{{obj.name}}

 防止obj为空时报错

  * 文档请参考 https://lodash.com/docs/4.17.4#get



$3

  * 日期格式过滤器 基于moment库实现

  * 用法

{{new Date() | moment('YYYY-MM-DD')}} => 2017-01-01

 调用moment isBefore方法 中括号中是isBefore的参数，其他函数同理

  * 更多请参考 http://momentjs.com/docs/#/parsing/string-format/





工具

import {ajax,modelUtils,commonYUtils} from 'cpt-toolkit'



$3

  * 基于axois针对后端接口规范做的封装

   会根据后端返回接口进行提示,如果返回FAILD标志会进行错误提示，返回其他默认不会提示。如需提示使用notify*选项

  * 增加了自定义提示消息配置：notifyMessage

javascript

     ajax.post(urls.save,data,{notify:true,notifyMessage:'自定义提示消息'})

    //强制提示

    ajax.post(urls.save,data,{notify:true})



   会处理登录过期跳转,默认会跳转到后端返回的location,如需自定义处理使用loginTimeoutHandler*选项

javascript

    //调用到端登录界面

    ajax.defaults.loginTimeoutHandler = (location)=>{

      window._vueInstance.$store.dispatch('account/logout');

    }



  * 其他用法请参考 https://github.com/mzabriskie/axios





$3

  *

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：自定义渲染

javascript

    const fields = [

      {

        key: 'name',

        showInColumn: true,

        order: 1,

        title: '名称',

        default:'测试'

        rules: [

          { required: true, message: '请填写地域名称' }//表单验证规则

        ]

      }

    ]



$3

  *

recurseData

：递归处理数据,最小单元为原始类型的数据

javascript

  //将对象中日期的字段进行格式化

  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对象

javascript

  // 将所有菜单项的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



$3

* addClass(el,classNames) 增加类

* removeClass(el,classNames) 移除类

* getSize(el) 获取元素 宽高，隐藏的元素也可以获取

* triggerResize 触发windows resize事件



$3

* 说明

  * 处理树型数据的相关逻辑

  * 有关控制树状态的字段

  * 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是回掉函数



$3

* 增加vue组件 主要是实现切面编程的功能

javascript

expor default enhance({

  methods:{

    test(){



    }

  },

  aspects:{

    beforeTest(arg){//test执行之前，arg是test的参数

    },

    afterTest(res,arg){//test执行之后，如果test返回Promise 则会在解析完之后执行,res是test的返回结果，arg是test的参数

    }

  }

})







组件

$3

  * column-layout：列布局 左右支持5列,中间自适应

html



  * row-layout：行布局 上下支持5行

html



  * page-layout:页面布局 分上中下，上又分为左右左边一般作为title区域，右边作为工具栏，下边分页栏等

html



$3

  * 可拖动，缩放

  *





$3

  * 支持复杂表头

  * 支持汇总栏

  * 增加fixHeight 在自适应的基础上调整高度

  * 扩展了column 配置renderSummary 用法和render相同 不同的是renderSummary的数据是summaryData

 html

$3

pug

    cpt-panel

      span(slot="head") 收件列表

      ....



$3

 * 用于垂直选项卡

 * 对应子组件的form-tab-panel

pug

  form-tab(v-model="tab")

    form-tab-pane(label="承包方信息" name="cbfxx" :errorCount="1") errorCount  代表错误数量，会在tab栏显示红色的错误数量

cpt-toolkit

凯普顿 前端工具集合

指令

$3

$3

$3

$3

插件

$3

过滤器

$3

$3

工具

$3

$3

$3

$3

$3

$3

组件

$3

$3

$3

$3

$3

cpt-toolkit

凯普顿 前端工具集合

指令

$3

$3

$3

$3

插件

$3

过滤器

$3

$3

工具

$3

$3

$3

$3

$3

$3

组件

$3

$3

$3

$3

$3

凯普顿前端工具集合

凯普顿前端工具集合