vue封装分页组件pagination(可跳转界面)
最近新做项目前端要用到分页查询,如果不进行封装的话,代码过于冗余,所以进行了封装,可以跳转界面,修改每页显示数量封装的js代码如下(function (vue) {// html模板信息var template = '<div class="page-bar"> \<div class="page-list"> \<span>共{{ totalPage }}页
·
最近新做项目前端要用到分页查询,如果不进行封装的话,代码过于冗余,所以进行了封装,可以跳转界面,修改每页显示数量
封装的js代码如下
(function (vue) {
// html模板信息
var template = '<div class="page-bar"> \
<div class="page-list"> \
<span>共{{ totalPage }}页 / {{ all }}条</span>\
<span class="page-item" v-on:click="btnClick(1)">首页</span>\
<span class="page-item" :class="{disabled: currentPage === 1}" v-on:click="prvePage(cur)">上一页</span> \
<span class="page-ellipsis" v-if="showPrevMore" >...</span>\
<span class="page-item" v-for="index in indexs" v-bind:class="{ active: cur == index }" v-on:click="btnClick(index)"> \
{{ index < 1 ? "..." : index }} \
</span> \
<span class="page-ellipsis" v-if="showNextMore">...</span>\
<span class="page-item" :class="{disabled: currentPage === totalPage}" v-on:click="nextPage(cur)">下一页</span> \
<span class="page-item" v-on:click="btnClick(totalPage)">末页</span>\
<select class="page-select form-control" v-model="pagesize">\
<option v-for="size in pageSizeArray" :key="size" :value="size">{{ size }}条/页</option>\
</select>\
<span class="ml20">跳至</span>\
<span class="page-jump-to"><input type="type" v-model="jumpPageNumber"></span>\
<span>页</span>\
<span class="page-item jump-go-btn" @click="btnClick(jumpPageNumber)">GO</span>\
</div> \
</div>'
var pagination = vue.extend({
template: template,
data () {
return {
currentPage: this.cur,
pagesize: this.pageSizeArray[0],
jumpPageNumber: 1,
showPrevMore: false,
showNextMore: false
}
},
props: {
cur: { //当前页面
type: Number,
default: 1
},
pageSizeArray: { //每页显示数量
type: Array,
default () {
return [15, 20, 25, 30,50]
}
},
all: { //总条数
type: Number,
default: 1000
},
pageGroup: { //连续页码个数
type: Number,
default: 5
},
},
computed: {
totalPage() { //总页数
return Math.ceil(this.all / this.pagesize);
},
indexs: function () {
const totalPage = this.totalPage
const groupArray = []
const pageGroup = this.pageGroup
const _offset = (pageGroup - 1) / 2
let current = this.cur
const offset = {
start: current - _offset,
end: current + _offset
}
if (offset.start < 1) {
offset.end = offset.end + (1 - offset.start)
offset.start = 1
}
if (offset.end > totalPage) {
offset.start = offset.start - (offset.end - totalPage)
offset.end = totalPage
}
if (offset.start < 1) offset.start = 1
this.showPrevMore = (offset.start > 1)
this.showNextMore = (offset.end < totalPage)
for (let i = offset.start; i <= offset.end; i++) {
groupArray.push(i)
}
return groupArray
},
},
methods: {
// 页码点击事件
btnClick: function (pageNumber) {
if (pageNumber< 1 || pageNumber>this.totalPage){
swal("页码不符合");
this.jumpPageNumber=1
return;
}
this.currentPage = pageNumber
this.jumpPageNumber=pageNumber
//父组件通过change方法来接受当前的页码
this.$emit('btn-click', {currentPage: this.currentPage, currentSize: this.pagesize})
},
// 下一页
nextPage: function (data) {
if (this.cur >= this.totalPage) 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" : ""
}
}
},
watch: {
pagesize(newValue, oldValue) {
if(newValue !== oldValue){
if(this.currentPage >= this.totalPage){ //当前页面大于总页面数
this.currentPage = this.totalPage
}
this.btnClick(1);
}
}
},
})
vue.Pagination = pagination
})(Vue)
html界面要是调用的话引用先引用上面的js
然后界面引用下边代码,currpage为当前页码totalcount为查询的数据总数
listen为当点击页码或改变每页数量时执行的方法,
<div class="page-helper">
<vue-pagination :cur.sync="currpage" :all.sync="totalcount" v-on:btn-click="listen" ></vue-pagination>
</div>
并且需要在vue中调用组件
components: {
// 引用组件
'vue-pagination': Vue.Pagination
},
分页的样式如下,有可能会有多余的代码,那是我其他项目特殊要求的,大家可以忽略
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;
}
.page-helper {
font-weight: 500;
height: 40px;
text-align: center;
color: #888;
margin: 10px auto;
}
.page-list {
font-size: 0;
height: 50px;
line-height: 50px;
}
.page-list span {
font-size: 14px;
margin-right: 5px;
user-select: none;
}
.page-list .page-item {
border: 1px solid #aaa;
padding: 5px 8px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
cursor: pointer;
margin-right: 5px;
}
.page-ellipsis {
padding: 0 8px;
}
.page-jump-to input {
width: 45px;
height: 26px;
font-size: 13px;
border: 1px solid #aaa;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
text-align: center;
}
.page-list .jump-go-btn {
font-size: 12px;
}
.page-select{
border: 1px solid #aaa;
padding: 5px 8px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
cursor: pointer;
margin-right: 5px;
margin-left: 5px;
}
.page-list .page-item .disabled{
pointer-events: none;
background: #ddd;
}
.page-list .page-current {
cursor: default;
color: #fff;
background: #337ab7;
border-color: #337ab7;
}
ul,li,span,input,select{
margin:0;
padding:0;
}
ul{
list-style: none;
}
li{
float:left;
margin-right:10px;
font-size:14px;
}
a{
text-decoration: none;
color:black;
}
.fPage{
margin:100px 200px;
}
.fPage ul>li>a{
border:1px solid #C3C9D3;
text-align:center;
color: #656565;
padding: 6px 12px;
}
.pageNum .active{
background-color: #1B6FEC;
color:white;
}
.fPage .showPageNum>select{
padding: 6px 10px;
margin-top:-6px;
}
.fPage .selectPageNum{
margin-top:-5px;
}
.fPage .selectPageNum>input{
width:20px;
padding: 5px 8px;
}
.disabled{
outline:0 none;
cursor:default;
opacity: 0.4;
/*filer:alpha(opacity=40);*/
pointer-events: none;
}
这也是我项目完成后期整理的,有可能不完整,大家有什么意见直接提
更多推荐
已为社区贡献1条内容
所有评论(0)