好资源导航 » 文章资讯 » 一个可复用的vue分页组件

一个可复用的vue分页组件

2024-02-23 19:48:03 60

不废话，先上组件文件pages.vue:


slider">
...





slider">
...







下一页

@import'../scss/base/variables'; .pages-box{ position:relative; padding:5px10px; margin:20px0; text-align:center; } .pages{ display:inline-block; padding:10px0; &:after{ content:""; display:table; line-height:0; clear:both; } li{ float:left; height:20px; line-height:20px; text-align:center; margin:02px; box-sizing:border-box; font-size:13px; span,a{ display:block; width:100%; height:100%; padding:02px; box-sizing:border-box; } } .pages-li{ min-width:30px; border:1pxsolid$theme; color:$theme; a{ color:$theme; } &.active{ span{ background:$theme; color:#fff; } } } .pages-prev,.pages-next{ padding:08px; 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:1pxsolid$theme; border-top:1pxsolid$theme; } } } .pages-preva{ padding-left:8px; &:before{ transform:rotate(-45deg); left:0; } } .pages-nexta{ padding-right:8px; &:before{ transform:rotate(135deg); right:0; } } .pages-num{ .num-input{ min-width:20px; height:20px; padding:05px; line-height:20px; border-radius:2px; border:1pxsolid$theme; color:$theme; text-align:center; outline:none; } } .pages-go{ a{ color:$theme; } span{ color:#666; } } }

使用方法：

在需要分页的地方使用分页组件标签，比如这里的order.vue：

0">

在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'
}
},

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。

返回顶部
514930285
czq8825@qq.com

一个可复用的vue分页组件

热门推荐

随机推荐