一个可复用的vue分页组件

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

 @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;
   }
  }
 }

使用方法：

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

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

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