2 Star 0 Fork 2

chenzhizhuo / pages-plugin

加入 Gitee
与超过 1200万 开发者一起发现、参与优秀开源项目,私有仓库也完全免费 :)
免费加入
该仓库未声明开源许可证文件(LICENSE),使用请关注具体项目描述及其代码上游依赖。
克隆/下载
贡献代码
同步代码
取消
提示: 由于 Git 不支持空文件夾,创建文件夹后会生成空的 .keep 文件
Loading...
README

pages-plugin

描述

基于vue 的一款分页组件。
(1) 国际化支持 (vue/slot);
(2) 分页插件: 支持国际化, 支持每页显示条数切换,上一页,下一页, 跳转到 指定页;


Installation

  • npm/cnpm i //安装依赖包

  • 依赖:

    • vue
    • vue-loader
  • 这里版本要对应上否编译报错。 6.x 》 7.x

    • "babel-core": "^6.22.1",
    • "babel-loader": "^7.1.4",
    • "babel-preset-env": "^1.7.0",
  • css-loader

  • style-loader

  • html-webpack-plugin // 如果希望打包输出,已自定模板并生成注入引用的html文件


指令说明

  1. npm run start // 启动服务
  2. npm run build // 打包

使用说明

 *  1. 全局注册组件方式
 *  import PagesPlugin form 'pages-plugin'  
 *  Vue.use(PagesPlugin)  
 *  支持国际化(默认中文)  
 *  在你的组件中如何使用:  
    使用该插件支持在标签内自定义设置国际化属性(不设置则默认中文文本):  
 *  <pages-plugin :page-count="count" :page-size="pageSize" :call-back="pageChangeCB" :size-array="[10, 20]">
  *   <template slot="rowscount">Show row number(显示行数):</template>
      <template slot="prvpage">Previous page(上一页)</template>
      <template slot="page">Page(页)</template>
      <template slot="total">Total(共)</template>
      <template slot="the">The(第)</template>
      <template slot="goto">Jump to(跳到第)</template>
      <template slot="nextpage">Next page(下一页)</template>
    </pages-plugin>
****
*  2. Vue 原型方式
   *  import PagesPlugin form 'pages-plugin'  
   *  Vue.use(PagesPlugin) 
   *  该方式暂未提供国际化实现(是可以实现的)
   * 一般放在mounted 的时候初始化使用(需要使用分页的页面中引入即可)
   * this.$initPages(this.pagesCallBack, bindElementId, initPageCount, initPageSize, pageType, sizeArray)
   * 在页面组件需要的位置定义自己的插入分页位置(bindElementId),插件即可在指定tag id  位置插入dom。
   *  


*  注意事项:
   注意组件在本地开发测试时,webpack.config.js devServer 及 入口相关配置修改

其它知识点总结

(1). 每次发布npm需要更新版本编号
可以直接手动在package.json中更改version字段。当然,也可以使用命令
npm version [ | major | minor | patch | premajor | preminor | prepatch | prerelease [--preid=] | from-git]
此命令,会在git commit中生成一条记录,并标记tag。 解释下以下三种:patch、minor、major
patch: 补丁发布,向后兼容的bug修复,增加第三个数字。1.0.1
minor: 轻微发布,向后兼容的新特性,将中间数字增加并将最后一位数重置为0。1.1.0
major: 重大发布,破坏向下兼容的变化,将第一个数字增加,并将后两位数重置为0。2.0.0

(2). 发布npm
(1) 打包好需要发布的文件
(2) npm login 输入账号、密码, 注册邮箱
(3) npm publish 发布即可

问题总结:

1). 如何排除不想发布到npm上的文件  
  通过在.npmignore 文件中配置文件夹名即可  
2). 如何更新一个npm 插件  
   更新方式与发布一个新插件一样: npm publish. 但是需要修改package.json 中的version 版本号。否则会报错  
3). 注入式插件本地dev 开发入口文件绑定 #app, 发布时不需要vue的实例操作怎么处理?  
   将webpack.config.js 中的入口文件指向 src 的暴露 install 的js文件即可。  
4). 如果只发布打包好的dist 文件夹,那么插件在哪里告知使用者,主入口文件是哪个?  
   通过设置package.json 文件中的 "main": "dist/pages.min.js", 项即可。  
5). 为什么安装插件使用时提示没有找到插件名xx, 或者插件不存在?  
   这个情况有点多:  
  * 在插件的组件内设置name (如:pages-plugin)  
  * 设置 package.json 文件中的name属性值(尽量保持一致:pages-plugin)  
  * npm包名(安装时的名字如:pages-plugin@1.0.1) 尽量保持一致  
  * install 方式需要在使用时(先 import xxx from xxxxxxx 你的插件),通过Vue.use(xxx) 注册到vue中。  
  * 使用插件时用的组件名称是对应插件主键中设置的name属性值。 如: pages-plugin  
6). 若是组件开发可通过@组织(命名空间)/库名 的形式来命名组件。
    发布的时候部分情况会提示名字已存在,发布失败。此时可以通过 npm publish --access public 来发布
   (例:npm publish --access public @czzui/page-plugin)

展示效果简述

显示条数 10 20 30 50 上一页 总共x页 第x页 下一页 转到第 | x | 页


github

GitHub地址:https://gitee.com/chenzhizhuo/pages-plugin

空文件

简介

分页插件 展开 收起
JavaScript
取消

发行版

暂无发行版

贡献者

全部

近期动态

加载更多
不能加载更多了
JavaScript
1
https://gitee.com/chenzhizhuo/pages-plugin.git
git@gitee.com:chenzhizhuo/pages-plugin.git
chenzhizhuo
pages-plugin
pages-plugin
master

搜索帮助

53164aa7 5694891 3bd8fe86 5694891