项目开发中,经常会遇到分页功能,也会经常涉及组件化开发和组件复用,下列用vue对分页组件进行了简单封装,具体代码如下:
源代码:
(1)app.vue代码段:
<template>
<div id="app">
<v-pagination :cur.sync="cur" :all.sync="all" @listen="monitor"></v-pagination>
<p>{{msg}}</p>
</div>
</template>
<script>
import pagination from './components/pagination.vue';
export default {
name: 'app',
data () {
return{
// 当前页码
cur: 1,
// 总页数
all: 100,
msg: ''
};
},
components: {
// 引用组件
'v-pagination': pagination
},
created() {
this.msg = "当前页为:" + this.cur;
},
methods: {
monitor: function (data) {
// 翻页事件
this.msg = "当前页为:" + data;
}
}
};
</script>
<style lang="scss"></style>
(2)pagination.vue代码片段:
<template>
<div class="page-bar">
<ul>
<li><a :class="setButtonClass(0)" v-on:click="prvePage(curIndex)">上一页</a></li>
<li v-for="index in indexs" v-bind:class="{ active: curIndex == index }">
<a v-on:click="btnClick(index)">{{ index < 1 ? "..." : index }}</a>
</li>
<li><a :class="setButtonClass(1)" v-on:click="nextPage(curIndex)">下一页</a></li>
</ul>
</div>
</template>
<script>
export default {
props: ['cur', 'all'],
data() {
return{
curIndex: 1
};
},
computed: {
indexs: function () {
var left = 1;
var right = this.all;
var ar = [];
if (this.all >= 11) {
if (this.curIndex > 5 && this.curIndex < this.all - 4) {
left = this.curIndex - 5;
right = this.curIndex + 4;
} else {
if (this.curIndex <= 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.curIndex) {
this.curIndex = data;
this.$emit('listen', data);
console.log(data);
}
},
// 下一页
nextPage: function (data) {
if (this.curIndex >= this.all) return;
this.btnClick(this.curIndex + 1);
},
// 上一页
prvePage: function (data) {
if (this.curIndex <= 1) return;
this.btnClick(this.curIndex - 1);
},
// 设置按钮禁用样式
setButtonClass: function (isNextButton) {
if (isNextButton) {
return this.curIndex >= this.all ? "page-button-disabled" : "";
}
else {
return this.curIndex <= 1 ? "page-button-disabled" : "";
}
}
}
}
</script>
<style lang="scss">
@import "../style/pagination.css";
</style>
(3)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;
}
(4)main.js代码片段:
import Vue from 'vue'
import App from './App.vue'
new Vue({
el: '#app',
render: h => h(App)
})
(5)效果图: