vue（依照v-page（github上））修改的适合自己用的分页插件
vue 搭建的前端项目，需要用到分页插件，在github 上搜索，样式都比较简单，不太符合要求，终于找到一个整体不错的插件
地址：https://terryz.gitee.io/vue/#/page/demo
文档也蛮详细，但入参除了语言，样式，总条数，每页显示条数外没有其他入参，这个比较头大（语言啥这些自己也不需要）；
因为我的列表页有很多筛选条件，点击其他筛选条件，当前页应该回到第一页，而不是停留在上次点击的页数，入参需要增加当前页控制（即点击筛选条件，返回第一页），因为水平有限，本来想在原来插件基础上加以修改，但担心影响v-page这个module（自己不清楚是怎样集成为模块的），干脆自己把格式代码粘出来，重新写了一个分页组件，方便使用（基本上是原来代码，只是稍加修改）；
修改后原码如下
一、v-page组件内容如下：
<template>
<div class="page">
<ul>
<li class="disabled vPaginationList">
<a>每页记录数
<select @change="switchLength" v-model="pageSize">
<option v-for="len in lengthList">{{len}}</option>
</select>
</a>
</li>
<li class="disabled bPageInfo">
<a>当前显示第{{currentPage}}/{{totalPage}}页(共{{totalRow}}条记录)</a>
</li>
<li :class="{disabled:currentPage === 1,bPageControlButton:true}">
<a href="javascript:void(0);" @click="switchPage('first')">首页</a>
</li>
<li :class="{disabled:currentPage === 1,bPageControlButton:true}">
<a href="javascript:void(0);" @click="switchPage('previous')">«</a>
</li>
<li :class="{active:(num === currentPage)}" v-for="num,index in pageNumbers">
<a href="javascript:void(0);" @click="switchPage(num)">{{num}}</a>
</li>
<li :class="{bPageControlButton:true,disabled:currentPage === totalPage}">
<a href="javascript:void(0);" @click="switchPage('next')">»</a>
</li>
<li :class="{bPageControlButton:true,disabled:currentPage === totalPage}">
<a href="javascript:void(0);" @click="switchPage('last')" >尾页</a>
</li>
</ul>
</div>
</template>
<script>
import con from './constant';
let defaults = con;
export default {
name: "v-page",
props:['setconfig'],
data(){
let config = Object.assign({}, defaults, this.setconfig);
return {
config:config,
lengthList:config.pageSizeMenu,
pageNumber: 1,
pageSize: config.pageSizeMenu&&Array.isArray(config.pageSizeMenu)&&config.pageSizeMenu.length?config.pageSizeMenu[0]:10,
totalRow: config.totalRow,
totalPage: 0,
currentPage:config.pageNumber,
pageNumberSize: 5
};
},
computed:{
pageNumbers: function(){
let start, end, nums = [], pNum = this.currentPage, half = Math.floor(this.pageNumberSize / 2);
if(this.totalPage < this.pageNumberSize) {
start = 1;
end = this.totalPage;
} else if ( pNum <= half ) {
start = 1;
end = this.pageNumberSize;
} else if ( pNum >= (this.totalPage - half) ) {
start = this.totalPage - this.pageNumberSize + 1;
end = this.totalPage;
} else {
start = pNum - half;
end = start + this.pageNumberSize - 1;
}
for(let i = start;i <= end; i++){
nums.push(i);
}
return nums;
}
},
watch:{
currentPage:function(val){
this.goPage(val);
},
'setconfig.totalRow':{
handler:function(newVal,oldval){
this.totalRow = newVal;
this.calcTotalPage();
},
deep:true
},
'setconfig.pageNumber':{
handler:function(newVal,oldval){
if(newVal==1){
console.log(newVal);//监听当前页，只要为1即返回首页
this.goPage(1);
}
},
deep:true
}
},
methods:{
goPage(pNum){
console.log({
pageNumber: pNum,
pageSize: Number(this.pageSize),
})
this.currentPage = pNum;
this.$emit('number-emit',{
pageNumber: pNum,
pageSize: Number(this.pageSize),
});
this.calcTotalPage();
},
calcTotalPage(){
this.totalPage = Math.ceil(this.totalRow / this.pageSize);
},
switchPage(pNum){
if(typeof(pNum) === 'string'){
switch (pNum){
case 'first':
if(this.currentPage!==1) this.currentPage = 1;
break;
case 'previous':
if(this.currentPage!==1) this.currentPage--;
break;
case 'next':
if(this.currentPage!==this.totalPage) this.currentPage++;
break;
case 'last':
if(this.currentPage!==this.totalPage) this.currentPage = this.totalPage;
break;
}
}else if(typeof(pNum) === 'number'){
this.currentPage = pNum;
}
},
switchLength(){
this.goPage(1);
}
},
mounted(){
this.goPage(1);
}
}
</script>
<style scoped>
/*分页样式*/
.page>ul{
display: inline-block;
margin-bottom: 0;
margin-left: 0;
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0;
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.05);
-moz-box-shadow: 0 1px 2px rgba(0,0,0,0.05);
box-shadow: 0 1px 2px rgba(0,0,0,0.05);
padding: 0;
}
.page>ul>li{
/*margin: 0;*/
/*border: 1px solid #ddd;
border-radius: 0;
padding: 6px 12px;*/
/*display:inline;
height:20px;
line-height: 20px;*/
text-align: center;display: inline;box-sizing: border-box;margin: 0;
}
.page>ul>li>a{
margin: 0;
border: 1px solid #dddddd;
border-radius: 0;
padding: 6px 12px;
line-height: 20px;
box-shadow: none;
-moz-box-shadow: none;
-webkit-box-shadow: none;
background-color: white;
float: left;
text-decoration: none;
border-left-width: 0;
box-sizing: content-box;
color: black;
-webkit-transition: all .5s cubic-bezier(.175,.885,.32,1);
transition: all .5s cubic-bezier(.175,.885,.32,1);
}
.page>ul>li>a:hover {
box-shadow: 0 0 12px rgba(0,0,0,0.2);
-moz-box-shadow: 0 0 12px rgba(0,0,0,0.2);
-webkit-box-shadow: 0 0 12px rgba(0,0,0,0.2);
}
.page>ul>li.disabled > a {
color: #999999;cursor: default;
}
.page>ul>li:hover {
color: #999999;background-color: white;box-shadow: none;
}
.page>ul>li.active > a,.page>ul>li.active > span {
cursor: default;color: #999999;background-color: #EEEEEE;
}
.page>ul>li.active > a:hover,.page>ul>li.active > span:hover{
box-shadow: none;
}
.page>ul>li:first-child > a{
border-left-width: 1px;
-webkit-border-bottom-left-radius: 2px;
border-bottom-left-radius: 2px;
-webkit-border-top-left-radius: 2px;
border-top-left-radius: 2px;
-moz-border-radius-bottomleft: 2px;
-moz-border-radius-topleft: 2px;
}
.page>ul>li:last-child > a{
border-left-width: 1px;
-webkit-border-bottom-left-radius: 2px;
border-bottom-left-radius: 2px;
-webkit-border-top-left-radius: 2px;
border-top-left-radius: 2px;
-moz-border-radius-bottomleft: 2px;
-moz-border-radius-topleft: 2px;
}
</style>
二、constant.js
const defaults = {
totalRow: 0,
pageSizeMenu: [10,20,50,100],
};
export default {
defaults
}
三、引入分页的vue
<vpageM :setconfig="setPage" @number-emit="numberEmit" style="padding-bottom:20px;"></vpageM>
import vpageM from '@/components/riskPre-warning/vpageM/vpageM';
setPage:{
totalRow: 44,
pageSizeMenu: [5], // 初始数据
pageNumber:2
},
components:{
vpageM
},
numberEmit(pInfo){
this.setPage.pageNumber = pInfo.pageNumber;
this.pageNumber = pInfo.pageNumber;
this.pageSize = pInfo.pageSize;
}
大体就这些喽