基于Vue如何封装分页组件
更新时间：2016年12月16日 10:27:53 作者：天碼行空
使用Vue做双向绑定的时候，可能经常会用到分页功能，接下来通过本文给大家分享一个封装分页组件的方法，一起看看吧
（福利推荐：【腾讯云】服务器最新限时优惠活动，云服务器1核2G仅99元/年、2核4G仅768元/3年，立即抢购>>>：9i0i.cn/qcloud）
（福利推荐：你还在原价购买阿里云服务器？现在阿里云0.8折限时抢购活动来啦！4核8G企业云服务器仅2998元/3年，立即抢购>>>：9i0i.cn/aliyun）
使用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;
}
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)
pagination分页组件就封装好了，需要使用的时候，引入以上两个文件即可
接下来我们测试下效果
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gbk" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<title></title>
<script src="http://9i0i.com/pic.php?p=vue.js"></script>
<link href="pagination.css" rel="stylesheet" />
<script src="http://9i0i.com/pic.php?p=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>
最终效果
页码切换事件在listen中处理即可
点击此处下载源码：源码下载地址
以上所述是小编给大家介绍的基于Vue如何封装分页组件，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对程序员之家网站的支持！
相关文章
这篇文章主要给大家介绍了关于uniapp的核心知识，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2021-10-10
本文主要介绍了Element中Select选择器的实现，文中根据实例编码详细介绍的十分详尽，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-03-03
这篇文章主要介绍了Vue按钮级权限方案，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下2019-11-11
本篇文章主要介绍了Vue中如何实现proxy代理，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-04-04
今天小编就为大家分享一篇关于为什么要使用Vuex的介绍，小编觉得内容挺不错的，现在分享给大家，具有很好的参考价值，需要的朋友一起跟随小编来看看吧2019-01-01
这篇文章主要为大家详细介绍了vue实现模态框组件的相关资料，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-12-12
这篇文章主要介绍了vue如何监听页面缓存事件，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-05-05
这篇文章主要为大家详细介绍了vue iview实现动态新增和删除，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-06-06
详解vue使用vue-layer-mobile组件实现toast，loading效果
这篇文章主要介绍了详解vue使用vue-layer-mobile组件实现toast，loading效果，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-08-08
这篇文章主要介绍了Vue 子组件更新props中的属性值问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-10-10
最新评论