使用Vue做双向绑定的时候,可能经常会用到分页功能

接下来我们来封装一个分页组件

先定义样式文件 pagination.css

ul, li {
margin: 0px;
padding: 0px;
}

.page-bar {
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}

.page-button-disabled {
color:#ddd !important;
}

.page-bar li {
list-style: none;
display: inline-block;
}

.page-bar li:first-child > a {
margin-left: 0px;
}

.page-bar a {
border: 1px solid #ddd;
text-decoration: none;
position: relative;
float: left;
padding: 6px 12px;
margin-left: -1px;
line-height: 1.42857143;
color: #337ab7;
cursor: pointer;
}

.page-bar a:hover {
background-color: #eee;
}

.page-bar .active a {
color: #fff;
cursor: default;
background-color: #337ab7;
border-color: #337ab7;
}

.page-bar i {
font-style: normal;
color: #d44950;
margin: 0px 4px;
font-size: 12px;
}

ul, li {
margin: 0px;
padding: 0px;
} .page-bar {
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
} .page-button-disabled {
color:#ddd !important;
} .page-bar li {
list-style: none;
display: inline-block;
} .page-bar li:first-child > a {
margin-left: 0px;
} .page-bar a {
border: 1px solid #ddd;
text-decoration: none;
position: relative;
float: left;
padding: 6px 12px;
margin-left: -1px;
line-height: 1.42857143;
color: #337ab7;
cursor: pointer;
} .page-bar a:hover {
background-color: #eee;
} .page-bar .active a {
color: #fff;
cursor: default;
background-color: #337ab7;
border-color: #337ab7;
} .page-bar i {
font-style: normal;
color: #d44950;
margin: 0px 4px;
font-size: 12px;
}

js文件 pagination.js

(function (vue) {
// html模板信息
var template = '<div class="page-bar"> \
<ul> \
<li><a class="{{ setButtonClass(0) }}" v-on:click="prvePage(cur)">上一页</a></li> \
<li v-for="index in indexs" v-bind:class="{ active: cur == index }"> \
<a v-on:click="btnClick(index)">{{ index < 1 ? "..." : index }}</a> \
</li> \
<li><a class="{{ setButtonClass(1) }}" v-on:click="nextPage(cur)">下一页</a></li> \
</ul> \
</div>'

var pagination = vue.extend({
template: template,
props: ['cur', 'all'],
computed: {
indexs: function () {
var left = 1
var right = this.all
var ar = []
if (this.all >= 11) {
if (this.cur > 5 && this.cur < this.all - 4) {
left = this.cur - 5
right = this.cur + 4
} else {
if (this.cur <= 5) {
left = 1
right = 10
} else {
right = this.all
left = this.all - 9
}
}
}
while (left <= right) {
ar.push(left)
left++
}
if (ar[0] > 1) {
ar[0] = 1;
ar[1] = -1;
}
if (ar[ar.length - 1] < this.all) {
ar[ar.length - 1] = this.all;
ar[ar.length - 2] = 0;
}
return ar
}
},
methods: {
// 页码点击事件
btnClick: function (data) {
if (data < 1) return;
if (data != this.cur) {
this.cur = data
this.$dispatch('btn-click', data)
}
},
// 下一页
nextPage: function (data) {
if (this.cur >= this.all) return;
this.btnClick(this.cur + 1);
},
// 上一页
prvePage: function (data) {
if (this.cur <= 1) return;
this.btnClick(this.cur - 1);
},
// 设置按钮禁用样式
setButtonClass: function (isNextButton) {
if (isNextButton) {
return this.cur >= this.all ? "page-button-disabled" : ""
}
else {
return this.cur <= 1 ? "page-button-disabled" : ""
}
}
}
})

vue.Pagination = pagination

})(Vue)

(function (vue) {
// html模板信息
var template = '<div class="page-bar"> \
<ul> \
<li><a class="{{ setButtonClass(0) }}" v-on:click="prvePage(cur)">上一页</a></li> \
<li v-for="index in indexs" v-bind:class="{ active: cur == index }"> \
<a v-on:click="btnClick(index)">{{ index < 1 ? "..." : index }}</a> \
</li> \
<li><a class="{{ setButtonClass(1) }}" v-on:click="nextPage(cur)">下一页</a></li> \
</ul> \
</div>' var pagination = vue.extend({
template: template,
props: ['cur', 'all'],
computed: {
indexs: function () {
var left = 1
var right = this.all
var ar = []
if (this.all >= 11) {
if (this.cur > 5 && this.cur < this.all - 4) {
left = this.cur - 5
right = this.cur + 4
} else {
if (this.cur <= 5) {
left = 1
right = 10
} else {
right = this.all
left = this.all - 9
}
}
}
while (left <= right) {
ar.push(left)
left++
}
if (ar[0] > 1) {
ar[0] = 1;
ar[1] = -1;
}
if (ar[ar.length - 1] < this.all) {
ar[ar.length - 1] = this.all;
ar[ar.length - 2] = 0;
}
return ar
}
},
methods: {
// 页码点击事件
btnClick: function (data) {
if (data < 1) return;
if (data != this.cur) {
this.cur = data
this.$dispatch('btn-click', data)
}
},
// 下一页
nextPage: function (data) {
if (this.cur >= this.all) return;
this.btnClick(this.cur + 1);
},
// 上一页
prvePage: function (data) {
if (this.cur <= 1) return;
this.btnClick(this.cur - 1);
},
// 设置按钮禁用样式
setButtonClass: function (isNextButton) {
if (isNextButton) {
return this.cur >= this.all ? "page-button-disabled" : ""
}
else {
return this.cur <= 1 ? "page-button-disabled" : ""
}
}
}
}) vue.Pagination = pagination })(Vue)

pagination分页组件就封装好了,需要使用的时候,引入以上两个文件即可

接下来我们测试下效果

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<title></title>
<script src="vue.js"></script>
<link href="pagination.css" rel="stylesheet" />
<script src="pagination.js"></script>
</head>
<body>
<div id="app">
<vue-pagination :cur.sync="cur" :all.sync="all" v-on:btn-click="listen"></vue-pagination>
<p>{{msg}}</p>
</div>
<script type="text/javascript">
var app = new Vue({
el: '#app',
data: {
// 当前页码
cur: 1,
// 总页数
all: 100,
msg: ''
},
components: {
// 引用组件
'vue-pagination': Vue.Pagination
},
methods: {
listen: function (data) {
// 翻页会触发此事件
this.msg = '当前页码:' + data
}
}
})
</script>
</body>
</html>

最终效果

demo下载

 
 
 
好文要顶 

页码切换事件在listen中处理即可

基于Vue封装分页组件的更多相关文章

  1. vue 封装分页组件

    分页 一般都是调接口, 接口为这种格式 {code: 0, msg: "success",…} code:0 data:{ content:[{content: "11& ...

  2. vue封装分页组件

    element提供的分页是已经封装好的组件,在这里再次封装是为了避免每个用到分页的页面点击跳转时都要写一遍跳转请求 分页组件 <!--分页组件--> <template> &l ...

  3. 基于iview 封装一个vue 表格分页组件

    iview 是一个支持中大型项目的后台管理系统ui组件库,相对于一个后台管理系统的表格来说分页十分常见的 iview是一个基于vue的ui组件库,其中的iview-admin是一个已经为我们搭好的后天 ...

  4. 基于vue项目的组件中导入mui框架初始化滑动等效果时需移除严格模式的问题

    基于vue项目的组件中导入mui框架初始化滑动等效果时,控制台报错:Uncaught TypeError: 'caller', 'callee', and 'arguments' properties ...

  5. 基于vue的分页插件

    相信大家用过很多jquery的分页插件,那这次就用一用基于vue的分页插件. 这里的环境用的是springboot 首先要引入pagehelper的jar文件,版本是1.2.3,配置文件也需要配置一下 ...

  6. 如何基于 React 封装一个组件

    如何基于 React 封装一个组件 前言 很多小伙伴在第一次尝试封装组件时会和我一样碰到许多问题,比如人家的组件会有 color 属性,我们在使用组件时传入组件文档中说明的属性值如 primary , ...

  7. semantic、vue 使用分页组件和日历插件

    最近正在试试semantic-ui,结合了vue,这里忍不住吐槽semantic和vue的友好度简直不忍直视,不过既然用了,这里就分享几个用到的插件了 1.分页组件(基于vue) var pageCo ...

  8. 基于highcharts封装的组件-demo&源码

    前段时间做的项目中需要用到highcharts绘制各种图表,其实绘制图表本身代码很简单,但是由于需求很多,有大量的图形需要绘制,所以就不得不复制粘贴大量重复(默认配置等等)的代码,所以,后来抽空自己基 ...

  9. vue 自定义分页组件

    vue2.5自定义分页组件,可设置每页显示条数,带跳转框直接跳转到相应页面 Pagination.vue 效果如下图: all: small(只显示数字和上一页和下一页): html <temp ...

随机推荐

  1. block反向界面传值

    1.在第二个界面的.h文件中申明block @property(nonatomic,copy)void(^myBlock)(NSString * str); 2.在返回第一个界面的点击事件中赋值要传递 ...

  2. 1154. Easy sort

    #include<iostream>#include<cmath>#include<iomanip>#include<algorithm>using n ...

  3. Accordion - 手风琴

    //手风琴效果 <div style="overflow:hidden;height:400px;width:948px;"> <div class=" ...

  4. what is a ear

    http://docs.oracle.com/javaee/6/tutorial/doc/bnaby.html An EAR file (see Figure 1-6) contains Java E ...

  5. BZOJ2683 简单题(CDQ分治)

    传送门 之前听别人说CDQ分治不难学,今天才知道果真如此.之前一直为自己想不到CDQ的方法二很不爽,今天终于是想出来了一道了,太弱-- cdq分治主要就是把整段区间分成两半,然后用左区间的值去更新右区 ...

  6. C# 委托学习笔记

    接触委托 代理 delegate很久啦.除了看API,Kotoba也给我讲了 .说到委托,拿下面这个小例子比较好.(14年6月26花花给我的练习) 实例:写一个方法A,定义个方法B(打印hello), ...

  7. Bookstore project using XAMPP 详细配置 Part 3

    3. Create PHP 1) “Sublime Text” is used as text editor. 2) HTML part of “hello.php” was created as s ...

  8. 初学python里的yield send next

    今天看书的时候突然看到这个想起来一直没有怎么使用过send和next试了一下 发现了一个诡异的问题 import math def get_primes(start): while 1 : if is ...

  9. 03人人都应该了解的10个 jQuery 小技巧

    1  返回顶部按钮 你可以利用animate和scrollTop来实现返回顶部的动画,而不需要使用其他插件. // Back to top $('a.top').click(function () { ...

  10. 测试了几款 C# 脚本引擎 , Jint , Jurassic , Nlua, ClearScript

    测试类 public class Script_Common { public string read(string filename) { return System.IO.File.ReadAll ...