一个可复用的vue分页组件
程序员文章站
2022-03-20 15:53:15
不废话，先上组件文件pages.vue:
不废话，先上组件文件pages.vue:
<template>
<div class="pages-box" v-if="pagetotal > 0">
<ul class="pages">
<li class="pages-prev">
<a v-if="pagenow != 1" href="javascript:void(0);" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" @click="prevclick">上一页</a>
</li>
<!--如果只有一页就不显示固定的第一个分页按钮了,避免重复-->
<template v-if="pagetotal > 1">
<li v-for="i in pagebegin" class="pages-li" :class="{active:i == pagenow}">
<span v-if="i == pagenow" v-text="i"></span>
<a v-else href="javascript:void(0);" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" @click="pageclick" v-text="i"></a>
</li>
</template>
<li v-if="ellipsis[0] > slider">
<span>...</span>
</li>
<li v-for="i in pagemiddle" class="pages-li" :class="{active:i == pagenow}">
<span v-if="i == pagenow" v-text="i"></span>
<a v-else href="javascript:void(0);" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" @click="pageclick" v-text="i"></a>
</li>
<li v-if="pagetotal - ellipsis[1] > slider">
<span>...</span>
</li>
<li v-for="i in pageend" class="pages-li" :class="{active:i == pagenow}">
<span v-if="i == pagenow" v-text="i"></span>
<a v-else href="javascript:void(0);" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" @click="pageclick" v-text="i"></a>
</li>
<li class="pages-next">
<a v-if="pagenow != pagetotal" href="javascript:void(0);" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" @click="nextclick">下一页</a>
</li>
</ul>
</div>
</template>
<script>
export default{
name: 'pages',
props: {
//总页数
total: {
type: [number, string],
required: true
},
//当前页
now: {
type: [number, string],
default: 1
}
},
data() {
return {
//当前页
pagenow: this.now,
//总页数
pagetotal: this.total,
//输入的页码
pagenum: "",
//显示分页按钮的个数
length: 8,
//前后固定的分页按钮个数
slider: 1
}
},
watch: {
total(val){
let page_total = parseint(val);
page_total = (isnan(page_total) || page_total < 1) ? 1 : page_total;
this.pagetotal = page_total;
},
now(val){
let page_now = parseint(val);
page_now = (isnan(page_now) || this.pagetotal < 2 || page_now < 1) ? 1 : page_now;
page_now = page_now > this.pagetotal ? this.pagetotal : page_now;
this.pagenow = page_now;
}
},
computed: {
//前边显示固定分页数
pagebegin(){
return math.min(this.slider, this.ellipsis[0]);
},
//中间显示分页数
pagemiddle(){
let arr = [];
for (let i = this.ellipsis[0] + 1; i <= this.ellipsis[1]; i++) {
arr.push(i);
}
return arr;
},
//后边显示分页数
pageend(){
let arr = [];
for (let i = this.ellipsis[2] + 1; i <= this.pagetotal; i++) {
arr.push(i);
}
return arr;
},
/**
* 出现三个点时的分页的范围
* @returns {*[]}
* begin: 开始页码
* end: 结束页码
* end_max: 结束页码的最大值
*/
ellipsis() {
let end_max = this.pagetotal - this.slider;
let begin = this.pagenow - (this.length / 2) + this.slider;
begin = begin < 1 ? 1 : begin;
let end = begin + this.length - 2 * this.slider;
//当begin达到最小值后需要根据begin重新计算end以保证显示的分页按钮个数不变
end = begin < this.slider ? (end + this.slider - begin) : end;
if (end >= end_max) {
end = end_max;
//当end达到最大值后需要根据end重新计算begin以保证显示的分页按钮个数不变
begin = (end - this.length + 2 * this.slider) < 1 ? 1 : (end - this.length + 2 * this.slider);
}
return [begin, end, end_max];
}
},
methods: {
//上一页
prevclick() {
this.pagenow--;
this.pagenow = this.pagenow < 1 ? 1 : this.pagenow;
this.changepage(this.pagenow);
},
//下一页
nextclick() {
this.pagenow++;
this.pagenow = this.pagenow > this.pagetotal ? this.pagetotal : this.pagenow;
this.changepage(this.pagenow);
},
//点击页码
pageclick(e) {
this.pagenow = number(e.target.innertext.trim());
this.changepage(this.pagenow);
},
//输入页码
pageinput(e){
let num = parseint(e.target.innertext);
if(isnan(num)){
this.pagenum = '';
e.target.innertext = '';
} else {
this.pagenum = num;
//e.target.innertext = num;
}
},
//跳转到输入的页码
goclick() {
this.pagenum = this.pagenum < 1 ? 1 : this.pagenum;
this.pagenum = this.pagenum > this.pagetotal ? this.pagetotal : this.pagenum;
this.pagenow = this.pagenum;
this.pagenum = "";
this.changepage(this.pagenow);
},
// 切换分页
changepage(page){
let {name, params, query} = this.$route;
this.$router.push({
name,
params: object.assign(params, {page}),
query
});
}
}
}
</script>
<style lang="sass" type="text/scss" rel="stylesheet/scss">
@import '../scss/base/variables';
.pages-box{
position: relative;
padding: 5px 10px;
margin: 20px 0;
text-align: center;
}
.pages{
display: inline-block;
padding: 10px 0;
&:after{
content: "";
display: table;
line-height: 0;
clear: both;
}
li{
float: left;
height: 20px;
line-height: 20px;
text-align: center;
margin: 0 2px;
box-sizing: border-box;
font-size: 13px;
span, a{
display: block;
width: 100%;
height: 100%;
padding: 0 2px;
box-sizing: border-box;
}
}
.pages-li{
min-width: 30px;
border: 1px solid $theme;
color: $theme;
a{
color: $theme;
}
&.active{
span{
background: $theme;
color: #fff;
}
}
}
.pages-prev, .pages-next{
padding: 0 8px;
font-size: 12px;
a{
display: block;
height: 100%;
position: relative;
color: $theme;
&:before{
content: '';
position: absolute;
top: 50%;
display: block;
width: 6px;
height: 6px;margin-top:-4px;
border-left: 1px solid $theme;
border-top: 1px solid $theme;
}
}
}
.pages-prev a{
padding-left: 8px;
&:before{
transform:rotate(-45deg);
left: 0;
}
}
.pages-next a{
padding-right: 8px;
&:before{
transform:rotate(135deg);
right: 0;
}
}
.pages-num{
.num-input{
min-width: 20px;
height: 20px;
padding: 0 5px;
line-height: 20px;
border-radius: 2px;
border: 1px solid $theme;
color: $theme;
text-align: center;
outline: none;
}
}
.pages-go{
a{
color: $theme;
}
span{
color: #666;
}
}
}
</style>
使用方法：
在需要分页的地方使用分页组件标签，比如这里的order.vue：
<!--分页组件--> <pages :now="page" :total="totalpage" v-if="totalpage > 0"></pages>
在data中设置当前页和总页面的默认值
data(){
return {
totalpage:1,
page:1,
}
},
考虑一下我们希望我们点击页数按钮后发生什么
首先，点击某页数时路由会改变页数，从路由获取当前页
this.page = this.$route.params.page;
接着，我们希望有一个getorderfromserver方法将当前页数发送给服务器，再将返回的数据更新在页面上
getorderfromserver({
currentpage:this.page
})
最后调用的方法：
methods: {
// 查询全部订单
getorderfromserver(){
this.loading = true;
this.page = this.$route.params.page;
getorderfromserver({
currentpage: this.page,
ordertimestart:this.ordertimestart,
ordertimeend:this.ordertimeend,
servicename:this.servicename,
shopname:this.shopname,
status: this.status
}).then(({code, data}) => {
if (code == 200) {
this.orderlist = data.list;
this.totalpage = data.totalpage;
}
this.loading = false;
}).catch(err => {
this.tip('服务内部错误', 'error');
this.orderlist = {};
this.loading = false;
});
},
}
注意通过路由对方法作出响应，每次路由改变都调用此方法以更新页面
watch: {
$route: 'getorderfromserver'
}
还要对路由信息进行改造，让每一页（尤其是第一页）都有路由页数信息，可以对第一页进行重定向以达到目的：
{
path: 'order',
redirect: 'order/page/1',
},
{
path: 'order/page/:page',
component(resolve){
require.ensure([], function (require) {
resolve(require('../modules/personal/order/myorder.vue'));
}, 'modules/personal')
},
name:'order',
meta: {
login: 'none'
}
},
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
上一篇： 入门:10个技巧让你快速提高摄影技术