采用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 ...
随机推荐
- HDU 5934 强联通分量
Bomb Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others)Total Submis ...
- c#中字节数组byte[]、图片image、流stream，字符串string、内存流MemoryStream、文件file，之间的转换
字节数组byte[]与图片image之间的转化 字节数组转换成图片 public static Image byte2img(byte[] buffer) { MemoryStream ms = ne ...
- win10 uwp 绘图 Line 控件使用
本文主要讲一个在绘图中,我们会有一个基础的控件,Line.控件的基本使用和他能做出的我们很多时候需要的界面. 虽然是一个简单控件,但是可以做出很诡异的很好看的UI. 首先,我们要知道,Line就是画直 ...
- 工信部：我国4G用户近9.5亿 用户平均使用流量近2G
刚刚沿着广场转了一圈,我竟发现自己离他只有几步之遥,又在那条人行道上,刚才催促我前进的自豪感突然之间被惊慌代替.陌生人看着我,脸上流露出一种遗憾的表情,他向我靠近,轻轻摇着脑袋,像是为某个不受人控制的 ...
- Spring装配Bean之Java代码装配bean
尽管通过组件扫描和自动装配实现Spring的自动化配置很方便也推荐,但是有时候自动配置的方式实现不了,就需要明确显示的配置Spring.比如说,想要将第三方库中的组件装配到自己的应用中,这样的情况下, ...
- angular1与swiper
angular1路由切换过程中swiper不能使用. 问题1:在刚开始使用angular1的路由时,好多人会将swiper的初始化写在模板的父控制器上,这样会造成一个问题,swiper的初始化只在页面 ...
- Log4j各级别日志重复打印的问题
今天在配置Log4j日志的时候,发现日志重复打印的问题.网上查了很多资料,发现介绍Log4j配置的文章数量不少,但提到这个问题的文章却寥寥,解决了自己的问题以后,赶紧记录一下. 原文地址:http:/ ...
- netbeans 字体发虚
今天更新了netbeans,重启后蛋疼了,字体发虚,搜索网络后有得到如下方案: 对Archlinux,去/usr/share/netbeans/etc,里面找到netbeans.conf,给下面一行参 ...
- 汇总一些知名的 JavaScript 开发开源项目
汇总一些知名的 JavaScript 开发开源项目 转自:CTOLib , www.ctolib.com/topics-107352.html ggraph - 图形可视化的凌乱数据 这是一个建立 ...
- 利用python深度学习算法来绘图
可以画画啊!可以画画啊!可以画画啊! 对,有趣的事情需要讲三遍. 事情是这样的,通过python的深度学习算法包去训练计算机模仿世界名画的风格,然后应用到另一幅画中,不多说直接上图! 这个是世界名画& ...