基础组件


License
MIT
Install
npm install vue-client@1.20.102-cr

Documentation

vue-client

提供组件制作基础及部分通用组件。所有组件已经进行了全局注册,可直接使用。

第三方插件

  • vue-strap:由于需要对vue-strap进行修改,在src目录下,导入了vue-stap源码,与vue-client源码同等处理。
  • bootstrap:bootstrap源码,测试例子需要这些源码。OA等工程包含这些源码,不用复制。

目录结构

  • components: 提供的各种组件
  • mixins: 方便调用的混合
  • plugins: 系统提供的插件
  • stores: 特殊的数据存储
  • util: 各类工具

全局内容

  • all:完成vue所有初始化工作。
  • index.js:用于把相关模块对外公布,使用时,用import { 模块名 } from 'vue-client'即可引入。公布的模块有:
    • Selector
    • TreeMixin
    • PagedList
    • SelectStore
    • TreeList
    • all
  • client.less:自己扩充的基础样式,all里已经引入。

组件

  • AppBase:提供应用基础,包括对话框,发送请求时提示正在工作等。
  • Busy:显示正在工作组件。
  • HttpBusy:发送请求时,显示正在工作的组件。
  • MessageBox:显示提示框的组件。
  • Criteria:查询条件生成器。
  • List:列表显示数据组件。
  • DataGrid:数据表格组件。
  • Tree:显示树状列表的组件。
  • GridTree:表格树组件。
  • Pager:翻页组件。
  • CriteriaPaged:复合组件,带查询条件的翻页显示数据组件。
  • Route:路由组件,类似于浏览器里的一个页签。
  • Dynamic:动态页签组件。

插件

  • MessageBox:提供提醒对话框显示功能。
  • HttpStore:提供后台http请求功能。
  • Partial:提供片段支持。
  • Route:提供路由功能。

混合

stores

测试

所有组件均可单独测试,每个测试例子按如下目录结构组织

examples

List

index.html
main.js
App.vue
辅助组件.vue

通过List.html进行访问

测试例子

  • Partial:
    对Partial进行测试,测试Partial的各种组合能力。
  • Busy:
    测试Busy组件。通过按钮,测试Busy状态。
  • MessageBox:
    对MessageBox进行测试,按下确定,或者取消按钮后,显示按下的按钮。
  • HttpStore:
    对HttpStore进行测试,按钮按下后,发送错误请求,在控制台显示请求结果。
  • AppBase:
    对AppBase进行测试,发送错误请求,弹出错误对话框。
  • Criteria:
    对查询条件组件进行测试,点击查询,显示产生的条件。
  • List:
    对List进行测试,用程序产生10000条数据,测试List组件性能。
  • DataGrid:
    对数据表格进行测试,不从后台获取数据,直接显示给定数据。
  • Tree:
    对树进行测试,不从后台获取数据,直接显示给定数据。
  • GridTree:
    对表格树进行测试,不从后台获取数据,直接显示给定数据。
  • Pager:
    对翻页组件进行测试,不从后台获取数据,直接显示给定数据。
  • PagedList:
    对PagedList模型进行测试,包括与 List, Tree, DataGrid, GridTree 等组件的结合。
  • CriteriaPaged:
    对带查询条件的翻页列表进行测试,从后台获取数据,每条数据可以删除。列表部分包括:List, Tree, DataGrid, GridTree
  • DataForm:对表单进行完整测试,表单不需要组件。内容有:
    • 可以把数据提交后台,提交后台的数据可以通过左边的查询分页组件进行查询。
    • 查询出来的数据,当选中时,可以删除。
    • 左边查询分页组件支持:DataGrid, GridTree。不同查询组件放在tab页中。
    • 表单组件的输入数据可以进行校验。
  • Layout:对基于弹性盒模型的布局进行测试。