采用Vue2.0开发的分页js组件
2017-11-17 19:14:23
基于jQuery的分页插件相信大家伙已经都用过很多了,今天分享一下基于Vue2.0的分页插件pagination.js
由于项目需求，要求使用 Vue2.0 开发一套有关分页的组件
这款 pagination.js 组件，可以按照各自需求定制，以下代码可以直接复制引入项目中
// 1、Vue写的分页有两个参数
// pages：总页数，pageNo：当前页
// 直接上代码，考虑到兼容 IE 等浏览器，其中 template 直接使用字符串拼接方式
/**
* author: tyd
* createTime: 2017/11/13
* title: 分页组件
*/
var pageComponent = Vue.extend({
template: '<nav aria-label="Page navigation">'+
'<ul class="pagination">'+
'<li :class="{\'disabled\':curPage==1}">'+
'<a href="javascript:;" @click="goPage(curPage==1?1:curPage-1)" aria-label="Previous">'+
'<span aria-hidden="true">上一页</span>'+
'</a>'+
'</li>'+
'<li v-for="page in showPageBtn" :class="{\'active\':page==curPage}">'+
'<a href="javascript:;" v-if="page" @click="goPage(page)">{{page}}</a>'+
'<a href="javascript:;" v-else>···</a>'+
'</li>'+
'<li :class="{\'disabled\':curPage==pages}">'+
'<a href="javascript:;" @click="goPage(curPage==pages?pages:curPage+1)" aria-label="Next">'+
'<span aria-hidden="true">下一页</span>'+
'</a>'+
'</li>'+
'<li :class="{\'disabled\':pages==pages}">'+
'<a href="javascript:void(0);">'+
'共 {{pages}} 页'+
'</a>'+
'</li>'+
'</ul>'+
'</nav>',
// 用户组件传递数据
props: {
pages: {
type: Number,
default: 1
},
current: {
type: Number,
default: 1
}
},
data:function (){
return{
curPage:1
}
},
computed: {
// 显示分页按钮
showPageBtn:function() {
let pageNum = this.pages; // 总页数
let index = this.curPage; // 当前页
let arr = [];
if (pageNum <= 6) {
for (let i = 1; i <= pageNum; i++) {
arr.push(i)
}
return arr
}
// 对页码显示进行处理，动态展示
if (index <= 3) return [1, 2, 3, 4, 0, pageNum];
if (index >= pageNum - 1) return [1, 0, pageNum - 3, pageNum - 2, pageNum - 1, pageNum];
if (index === 4) return [1, 2, 3, 4, 5, 0, pageNum];
if (index === pageNum - 2) return [1, 0, pageNum - 4, pageNum - 3, pageNum - 2, pageNum - 1, pageNum];
return [1, 0, index - 2,index - 1, index, index + 1, index + 2, 0, pageNum];
}
},
methods: {
goPage:function(page) {
if (page != this.curPage) {
console.log(page);
this.curPage = page;
this.$emit('navpage', this.curPage);
}else{
console.log('Already in the current page');
}
}
}
});
Vue.component('navigation', pageComponent); // 注册组件
// 2、简单的演示 Html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue2.0分页组件</title>
<link href="https://cdn.bootcss.com/bootstrap/3.3.4/css/bootstrap.css" rel="stylesheet">
<script src="https://cdn.bootcss.com/vue/2.5.3/vue.js"></script>
<!-- 引入外部的 pagination.js 组件即可 -->
<script type="text/javascript" src="pagination.js"></script>
</head>
<body>
<div id="app" class="text-right" style="text-align: center;">
<navigation :pages="pages" :current.sync="pageNo" @navpage="pageList"></navigation>
</div>
<script type="text/javascript">
new Vue({
el: "#app",
data: {
pageNo: 1,
pages: 100
},
methods: {
pageList:function(curPage) {
//根据当前页获取数据
this.pageNo = curPage;
console.log("当前页：" + this.pageNo);
}
}
})
</script>
</body>
</html>
演示：
采用Vue2.0开发的分页js组件的更多相关文章
- vue2.0 开发实践总结之入门篇
vue2.0 据说也出了很久了,博主终于操了一次实刀. 整体项目采用 vue + vue-router + vuex (传说中的vue 全家桶 ),构建工具使用尤大大推出的vue-cli 后续文 ...
- vue-swiper 基于Vue2.0开发 轻量、高性能轮播插件
vue-swiper 基于 Vue2.0 开发,基本满足大部分功能 轻量.高性能轮播插件.目前支持 无缝衔接自动轮播.无限轮播.手势轮播 没有引入第三方库,原生 js 封装,打包之后只有 8.2KB ...
- [js高手之路]Vue2.0基于vue-cli+webpack父子组件通信教程
在git命令行下,执行以下命令完成环境的搭建: 1,npm install --global vue-cli 安装vue命令行工具 2,vue init webpack vue-demo 使用v ...
- vue2.0 + element-ui2实现分页
当我们向服务端请求大量数据的时候,并要在页面展示出来,怎么办?这个时候一定会用到分页. 本次所使用的是vue2.0+element-ui2.12实现一个分页功能,element-ui这个组件特别丰富, ...
- Vue2.0源码学习(3) - 组件的创建和patch过程
组件化 组件化是vue的另一个核心思想,所谓的组件化就,就是说把页面拆分成多个组件(component),每个组件依赖的css.js.图片等资源放在一起开发和维护.组件是资源独立的,在内部系统中是可以 ...
- vue2.0在页面中自定义组件模块，以及页面与组件之间的数据传递
1,在初始文件index.html中加入要引入的模块,注意驼峰命名的方式(我就是没写成驼峰,报错) <!DOCTYPE html> <html> <head> &l ...
- 基于vue2.0的一个分页组件
分页组件在项目中经常要用到之前一直都是在网上找些jq的控件来用(逃..),最近几个项目用上vue了项目又刚好需要一个分页的功能.于是百度发现几篇文章介绍的实在方式有点复杂, 没耐心看自己动手造轮子写了 ...
- [js高手之路]Vue2.0基于vue-cli+webpack同级组件之间的通信教程
我们接着上文继续,本文我们讲解兄弟组件的通信,项目结构还是跟上文一样. 在src/assets目录下建立文件EventHandler.js,该文件的作用在于给同级组件之间传递事件 EventHandl ...
- vue2.0开发时导入组件时出错
导入自定义组件时出现了如下错误 ERROR Failed to compile with 1 errors 12:35:41 This dependency was not found: * comp ...
随机推荐
- 坑中速记整理! 使用 kotlin 写第一个 ReactNative Android 模块
Kotlin 和 Swift, 两大新宠! 借 ReactNative 熟悉下 kotlin 的用法,不料掉坑里面了.昨晚花了大半夜,趁这会儿思路清晰,把涉及到的一些关键信息,迅速整理下. 最佳的使用 ...
- JavaScript实现模糊推荐的input框(类似百度搜索框)
如何用JS实现一个类似百度搜索框的输入框呢,再填充完失去焦点时,自动填充配置项,最终效果如下图: 实现很简单,但是易用性会上升一大截,需要用到的有jquery-ui的autocomplete,jque ...
- iOS开发工程师必备技能（持续更新）
Objective-C Objective-C语言基础 library,framework的制作 Runtime 编程 LLVM 原理和调优 操作系统 iOS内存管理和调优 iOS的文件系统和沙盒机制 ...
- 为选择屏幕的字段设置F4帮助
在没有参考 数据元素,域和搜索帮助的情况下,自定义F4 帮助 1,PARAMETERS: p_bukrs(4) TYPE C MATCHCODE OBJECT H_T001. 2,AT SELECTI ...
- 彻底理解Java的Future模式
先上一个场景:假如你突然想做饭,但是没有厨具,也没有食材.网上购买厨具比较方便,食材去超市买更放心. 实现分析:在快递员送厨具的期间,我们肯定不会闲着,可以去超市买食材.所以,在主线程里面另起一个子线 ...
- React与Preact差异之 -- setState
Preact是React的轻量级实现,是React比较好的替代者之一,有着体积小的优点,当然与React之间一定会存在实现上的差异,本文介绍了在 setState 方面的差异之处. 源码分析 首先来分 ...
- 开发人员的福音：微软、谷歌、Mozilla将他们所有的web API文档放在同一个地方
Tips 原文作者:Liam Tung 原文地址:Developers rejoice: Microsoft, Google, Mozilla are putting all their web A ...
- 在 JPA、Hibernate 和 Spring 中配置 Ehcache 缓存
jpa, hibernate 和 spring 时配置 ehcache 二级缓存的步骤. 缓存配置 首先在 persistence.xml 配置文件中添加下面内容: <property name ...
- 关于keyTyped
蠢了,重写keyTyped方法时候拿keyCode去做比较....记一下....VK_UNDEFiEND.......
- 【ASP.NET MVC 学习笔记】- 11 Controller和Action（2）
本文参考:http://www.cnblogs.com/willick/p/3331513.html 1.MVC一个请求的发出至action返回结果的流程图如下: 重点是Controller Fact ...