分页组件在项目中经常要用到之前一直都是在网上找些jq的控件来用(逃..),最近几个项目用上vue了项目又刚好需要一个分页的功能。于是百度发现几篇文章介绍的实在方式有点复杂,
没耐心看自己动手造轮子写了一个,用vue的计算属性去实现真正的逻辑代码大约在20行左右相当好理解现实原理简单没什么好介绍的直接上代码。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>vue-router</title>
<script src="./vue.js" ></script>
<style>
body{
font-family:"Segoe UI";
}
li{
list-style:none;
}
a{
text-decoration:none;
}
.pagination {
position: relative;
}
.pagination li{
display: inline-block;
margin:0 5px;
}
.pagination li a{
padding:.5rem 1rem;
display:inline-block;
border:1px solid #ddd;
background:#fff;
color:#0E90D2;
}
.pagination li a:hover{
background:#eee;
}
.pagination li.active a{
background:#0E90D2;
color:#fff;
}
</style>
</head>
<body>
<script type="text/x-template" id="page">
<ul class="pagination" >
<li v-show="current != 1" @click="current-- && goto(current)" ><a href="#">上一页</a></li>
<li v-for="index in pages" @click="goto(index)" :class="{'active':current == index}" :key="index">
<a href="#" >{{index}}</a>
</li>
<li v-show="allpage != current && allpage != 0 " @click="current++ && goto(current++)"><a href="#" >下一页</a></li>
</ul>
</script>
<div id="app">
<page></page>
</div>
<script>
Vue.component("page",{
template:"#page",
data:function(){
return{
current:1,
showItem:5,
allpage:13
}
},
computed:{
pages:function(){
var pag = [];
if( this.current < this.showItem ){ //如果当前的激活的项 小于要显示的条数
//总页数和要显示的条数那个大就显示多少条
var i = Math.min(this.showItem,this.allpage);
while(i){
pag.unshift(i--);
}
}else{ //当前页数大于显示页数了
var middle = this.current - Math.floor(this.showItem / 2 ),//从哪里开始
i = this.showItem;
if( middle > (this.allpage - this.showItem) ){
middle = (this.allpage - this.showItem) + 1
}
while(i--){
pag.push( middle++ );
}
}
return pag
}
},
methods:{
goto:function(index){
if(index == this.current) return;
this.current = index;
//这里可以发送ajax请求
}
}
})
var vm = new Vue({
el:'#app',
})
</script>
</body>
</html>
在线Demo地址:https://jslife23.github.io/vue-page/index.html
Github地址:https://github.com/JSlife23/vue-page/tree/master
第二种:
<style lang="stylus"> .pagination margin 0 .pagination-info padding 6px 12px border 1px solid #ccc border-radius 4px </style> <template> <div class="row clearfix"> <div class="col-xs-7"> <ul class="pagination clearfix"> <!-- 左侧切换 --> <li :class="{'disabled': pageData.currentPage<=1}"> <a href="javascript:void(0)" aria-label="Previous" @click="selectPage(pageData.currentPage-1, pageData.currentPage<=1)"> <span aria-hidden="true">«</span> </a> </li> <!-- 中间 --> <li v-for="n in pageShowArray" :class="{'pageOne': true, 'active': n==pageData.currentPage}"> <a href="javascript:void(0)" @click="selectPage(n, n==pageData.currentPage)">{{n}}</a> </li> <li :class="{'disabled': pageData.currentPage>=pageData.totalPage}"> <a href="javascript:void(0)" aria-label="Next" @click="selectPage(pageData.currentPage+1, pageData.currentPage>=pageData.totalPage)"> <span aria-hidden="true">»</span> </a> </li> </ul> </div> <div class="col-xs-2"> <div class="input-group clearfix goto-div"> <input type="text" class="form-control" value="{{goToNum}}" v-model="goToNum"> <span class="input-group-btn"> <button class="btn btn-default" type="button" @click="gotoPage() ">跳转</button> </span> </div> </div> <div class="col-xs-3"> <div class="pagination-info">当前第{{pageData.currentPage}}页/总共{{pageData.totalPage}},每页{{pageData.perPageNum}}条</div> </div> </div> </template> <script> export default { props: { pageData: { type: Object, require: true } }, ready () { }, created () { let self = this self.insertPage() self.$watch('pageData.currentPage', function(val) { self.insertPage() }) self.$watch('pageData.totalPage', function(val) { self.insertPage() }) }, data () { return { goToNum: 1, pageShowArray: [] } }, methods: { insertPage () { let self = this self.pageShowArray = [] if(self.pageData.totalPage<=8 || self.pageData.currentPage<=4) { let nowTotalPage = self.pageData.totalPage>8?8:self.pageData.totalPage for(let i=1;i<=nowTotalPage;i++) { self.pageShowArray.push(i); } } else { if(self.pageData.currentPage>4&&self.pageData.currentPage<=self.pageData.totalPage-4) { for(let i=self.pageData.currentPage-3;i<=self.pageData.currentPage+4;i++) { self.pageShowArray.push(i); } } else { for(let i=self.pageData.totalPage-7;i<=self.pageData.totalPage;i++) { self.pageShowArray.push(i); } } } }, gotoPage () { let thisNum = parseInt(this.goToNum) if(thisNum > this.pageData.totalPage) { this.badPageSelect(2) } else { if(thisNum != this.pageData.currentPage) { this.selectPageByNum(thisNum) } } }, selectPage (num, type) { if(!type) { let thisNum = parseInt(num) this.selectPageByNum(thisNum) } }, badPageSelect (status) { this.$dispatch('bad-page-select', status) }, selectPageByNum (num) { this.$dispatch('page-back-num', num) } } } </script>