npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

vue-client-dev

v1.0.1

Published

基础组件

Downloads

19

Readme

vue-client

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

第三方插件

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

目录结构

  • androidtest: 手机模拟所需内容
  • components: 提供的各种组件
  • mixins: 方便调用的混合
  • plugins: 系统提供的插件
  • stores: 特殊的数据存储
  • test: 单元测试基础
  • util: 各类工具

全局内容

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

组件

  • AppBase:提供应用基础,包括对话框,发送请求时提示正在工作等。
  • Busy:显示正在工作组件。
  • HttpBusy:发送请求时,显示正在工作的组件。
  • MessageBox:显示提示框的组件。
  • Criteria:查询条件生成器。
  • List:列表显示数据组件。
  • DataGrid:数据表格组件。
  • Tree:显示树状列表的组件。
  • GridTree:表格树组件。
  • Pager:翻页组件。
  • CriteriaPaged:复合组件,带查询条件的翻页显示数据组件。
  • Route:路由组件,类似于浏览器里的一个页签。
  • Dynamic:动态页签组件。
  • FormPrint: 连续打印列表中的数据。
  • PrintFile: 折子打印的数据。
  • LoadParams: 获取后台资源服务参数。
  • PrintTable: 表格数据打印。
  • PrintElement: 标签元素内容数据打印。
  • ReportExcel: 报表导Excel。
  • ReportPrint: 报表打印。
  • ReportSave: 报表打印。
  • FileUpload: 文件上传
  • ExportExcel: 配合业务逻辑完成Excel的导出
  • ImgSelf: 自定义图片查看组件
  • Slide: 新产品弹出组件
  • CriteriaData: 查询条件并且去后台请求数据
  • Listener:修改触发onerror事件的错误并POST到restful的log中去

插件

  • MessageBox:提供提醒对话框显示功能。
  • HttpStore:提供后台http请求功能。
  • Partial:提供片段支持。
  • Route:提供路由功能。
  • GetParams:提供获取指定参数的功能。

混合

stores

  • SelectStore:对选中的数据进行存储。
  • PagedList:提供分页列表数据处理。
  • TreeList:提供树数据处理。
  • DataModel: 提供一般数据处理。
  • AppData:提供存储从资源服务中获取到的参数。

测试

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

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:对基于弹性盒模型的布局进行测试。
  • Report: 对报表进行测试。
  • PrintFile: 对折子打印进行测试,从后台获取数据,打印到折子上。
  • PrintTable: 对表格连续打印进行测试,从后台获取数据。
  • ReportExcel: 对报表导出未Excel、报表打印进行测试和报表保存进行测试,不从后台获取数据,直接从界面根据传入的id获取导出的内容。
  • VSelect: 对从后台获取参数和下拉选择进行测试,从后台获取到多有的参数,通过插件提供的功能获取到指定的内容,并显示的下拉选项中。
  • ExportExcel: 对文件上传和导Excel进行测试,导Excel分为导出指定字段和全部字段,
  • ImgSelf: 可以单击图片全屏查看,并且提供放大缩小,旋转等功能
  • Slide: 正常情况下隐藏,当isOpen为true时,自动从边界滑出
  • CriteriaData:
    对根据查询条件取后台取数据组件进行测试,点击查询,显示产生的条件,并且去后台请求数据
  • Listener 修改触发onerror事件的错误并POST到restful的log中去

版本发布

运行npm run release发布版本。