标签:sort 方式 amp model ken use 跳转 font 页码
vue2.5自定义分页组件 Pagination.vue,可设置每页显示条数,带跳转框直接跳转到相应页面,亲测有用。目前很多框架自带有分页组件比如elementUI,不过在面对一个拿到PSD稿,然后重新切图,重新VUE开发的项目来说,自定义分页组件才是应万变的最佳打开方式。
<template>
<div class="pagination" v-if="totalPage>1">
<span v-if="!small" class="total">共{{totalCount}}条记录<!-- 第{{currentPage}}/{{totalPage}}页--></span>
<ul class="paging">
<li class="prev" :class="{‘disabled‘:currentPage<=1}" @click="currentPage<=1?‘‘:turn(currentPage-1)"><i class="iconfont icon-chevron-left"></i></li>
<li v-for="i in showPageBtn" class="num" :class="{‘active‘:i==currentPage}" v-if="i>0" @click="turn(i)">{{i}}</li>
<li v-else-if="i===‘-‘" class="num iconfont icon-more" :class="{‘icon-d-arrow-left‘:toPrev}" @click="turn(currentPage-1)" @mouseenter="toPrev=true" @mouseleave="toPrev=false"></li>
<li v-else-if="i===‘+‘" class="num iconfont icon-more" :class="{‘icon-d-arrow-right‘:toNext}" @click="turn(currentPage+1)" @mouseenter="toNext=true" @mouseleave="toNext=false"></li>
<li class="next" :class="{‘disabled‘:currentPage>=totalPage}" @click="currentPage>=totalPage?‘‘:turn(currentPage+1)"><i class="iconfont icon-chevron-right"></i></li>
</ul>
<select v-if="!small" v-model="limitNum" @change="turn(currentPage)">
<option v-for="item in limitNums" :value="item">{{item}}条/页</option>
</select>
<span v-if="all" class="jump">前往<input type="number" autocomplete="off" min="1" :max="totalPage" v-model="goPage" @keyup.enter="turn(goPage)">页</span>
</div>
</template>
js
<script>
export default {
name:‘MyPagination‘,
props: {
currentPage: {//当前页
type: Number,
default: 1,
},
limit:{//每页显示条数
type: Number,
default: 10,
},
totalCount:{//总条数
type: Number,
required: true
},
small:{
type:Boolean,
default: false,
},
all:{
type:Boolean,
default: false,
}
},
data() {
return {
goPage:‘‘,
limitNum:‘‘,
limitNums:[5,10,15,20,25,30],
toPrev:false,
toNext:false,
}
},
created: function () {
this.initLimitNums();
},
computed: {
totalPage(){
return Math.ceil(this.totalCount / this.limit)
},
showPageBtn() {
let pageNum = Number(this.totalPage),
index = Number(this.currentPage),
arr = [];
if (pageNum <= 9) {
for(let i = 1; i <= pageNum; i++) {
arr.push(i)
}
return arr
}
if (index < 5) return [1,2,3,4,5,6,7,‘+‘,pageNum]
if (index >= pageNum -1) return [1,2,‘-‘, pageNum -5,pageNum -4,pageNum -3, pageNum -2, pageNum -1, pageNum]
if (index === pageNum -2) return [1,2,‘-‘, pageNum -5,pageNum