采用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 ...
随机推荐
- javascript字典数据结构Dictionary实现
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat=&qu ...
- Javascript从“繁”到“简”进行数组去重
随着JavaScript提供语法的增多,数组去重方式也越来越多.现在从最原始的方式到最简洁的方式,一步步进行剖析. 双重循环 数组去重,不就是比较数组元素,去掉重复出现的么.最原始的方式不正是双重循环 ...
- 使用 Proxy + Promise 实现 依赖收集
(深入浅出Vue基于“依赖收集”的响应式原理) ,这篇文章讲的是通过一个通俗易懂例子,介绍了 如何用Object.defineProperty 实现的“依赖收集”的原理.Object.definePr ...
- java虚拟机指令dup的理解
举个例子: public class ExceptionTest{ void cantBeZero(int i) throws Exception{ throw new Exception(); } ...
- 使用 Newtonsoft.Json 操作 JSON 字符串
一.把实体类转化为 JSON 字符串 1. 为实体类赋值 SenderFromMQSearch senderFromMQSearch = new SenderFromMQSearch(); sende ...
- Windows 10「设置」应用完整MS-Settings快捷方式汇总
分类 设置名称 快捷方式 系统 显示 ms-settings:display 通知和操作 ms-settings:notifications 平板电脑模式 ms-settings:tabletmode ...
- ST40 自制 JTAG 适配器
// 文章首发于 https://zhuanlan.zhihu.com/p/28762429 // 但是不知道为什么搜索引擎还没有收录,便在博客再次发布. 0. 引言 意法半导体生产的 SH4 架构的 ...
- Java IO(Properties/对象序列化/打印流/commons-io)
Java IO(Properties/对象序列化/打印流/commons-io) Properties Properties 类表示了一个持久的属性集.Properties 可保存在流中或从流中加载. ...
- 谢欣伦 - 原创教程 - 使用GDI+绘制抗锯齿斜线
早些年用过GDI的同学都知道,用GDI绘图API函数画斜线那个锯齿有多恶心.就像下图第一行的三条斜线: 坦白说,45度斜线在抗锯齿以前还是蛮抗锯齿的,哈哈,抗不抗都没什么差别. 那第二行很自然就看得出 ...
- LeetCode 495. Teemo Attacking （提莫攻击）
In LOL world, there is a hero called Teemo and his attacking can make his enemy Ashe be in poisoned ...