采用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 ...
随机推荐
- Python自学笔记-进程，线程（Mr serven）
对于操作系统来说,一个任务就是一个进程(Process),比如打开一个浏览器就是启动一个浏览器进程,打开一个记事本就启动了一个记事本进程,打开两个记事本就启动了两个记事本进程,打开一个Word就启动了 ...
- js中 && 与 || 的妙用
在js逻辑运算中,0."".null.false.undefined.NaN都会判为false,其他都为true(好像没有遗漏了吧,请各位确认下).这个一定要记住,不然应用||和& ...
- 2017值得一瞥的JavaScript相关技术趋势
2017值得一瞥的JavaScript相关技术趋势从属于笔者的Web 前端入门与工程实践,推荐阅读2016-我的前端之路:工具化与工程化获得更多关于2016年前端总结.本文主要内容翻译自,笔者对于每个 ...
- Android 性能优化概念(1)
http://www.open-open.com/lib/view/open1421723359718.html#_label0 阅读目录 0)Render Performance 1)Underst ...
- Linux入门(3)——Ubuntu16.04下安装VMware
下载linux版本 http://www.vmware.com/cn/products/workstation/workstation-evaluation.html 激活秘钥:5A02H-AU243 ...
- MVC（一）-MVC的基础认知
MVC是一种编程模式和设计思想,MVC大致切割为三个主要单元:Model(实体模型),View(视图),Contrller(控制器),MVC主要目在于简化软件开发的复杂度,让程序代码形成一个松耦合. ...
- AVL 树
一棵AVL树是每个节点的左子树和右子树的高度最多差1的二叉查找树 SearchTree Insert(ElementType X, SearchTree T) { if (T == NULL) { T ...
- 我推荐的 Java Web 学习路线
晚上再 V2 的 Java 的节点看到有人问 Java Web 书籍推荐.我这半年多的时间,也从别的方向开始转向 Java 服务端开发,所以,我来说下我的学习路线,帮助有需要的朋友把半只脚踏进 Spr ...
- Memcached理解
一.Memcached简介: 1. Memcached是一个自由开源的,高性能的,分布式内存对象缓存系统. 2. Memcached是一种基于内存的key-value存储,用来存储小块的任意数据(字符 ...
- LeetCode 243. Shortest Word Distance （最短单词距离）$
Given a list of words and two words word1 and word2, return the shortest distance between these two ...