基于vue 的一款分页组件。
(1) 国际化支持 (vue/slot);
(2) 分页插件: 支持国际化, 支持每页显示条数切换,上一页,下一页, 跳转到 指定页;
npm/cnpm i //安装依赖包
依赖:
这里版本要对应上否编译报错。 6.x 》 7.x
css-loader
style-loader
html-webpack-plugin // 如果希望打包输出,已自定模板并生成注入引用的html文件
* 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 | 页
此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。