一个可复用的vue分页组件

网络编程 JavaScript javascript类库 vue.js 分类:[default] 更新日期: 2017-06-05
这篇文章主要为大家详细介绍了一个可复用的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);"      @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);"      @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);"      @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);"      @click="pageClick" v-text="i"></a>
   </li>

   <li class="pages-next">
    <a v-if="pageNow != pageTotal" href="javascript:void(0);"      @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" >
 @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'
  }
},

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


> 本站内容系网友提交或本网编辑转载,其目的在于传递更多信息,并不代表本网赞同其观点和对其真实性负责。如涉及作品内容、版权和其它问题,请及时与本网联系,我们将在第一时间删除内容!

相关文章
  • 利用ASP.NETMVC+Bootstrap搭建个人博客之打造清新分页Helper三
    利用ASP.NETMVC+Bootstrap搭建个人博客之打造清新分页Helper三
    这篇文章主要介绍了利用ASP.NET MVC+Bootstrap搭建个人博客之打造清新分页Helper三的相关资料,非常不错,具有参考借鉴价值,需要的朋友可以参考下0. 没有找到一款中意的分页插件,又不想使用现成的(丑到爆),所以自己动手造一个吧 先看下效果(其实也不咋滴...): 我的小站地址:我的Bootstrap小站; PS:(问博客园:为什么老是删我 ...
  • 将xml文件作为一个小的数据库,进行学生的增删改查的简单实例
    下面小编就为大家带来一篇将xml文件作为一个小的数据库,进行学生的增删改查的简单实例.小编觉得挺不错的,现在就分享给大家,也给大家做个参考.一起跟随小编过来看看吧1.xml文件: <?xml version="1.0" encoding="UTF-8"?><Students> <stude ...
  • 解读ASP.NET5&MVC6系列教程1:ASP.NET5简介
    这篇文章主要介绍ASP.NET 5简介以及对各个版本号进行解释,ASP.NET 5中新的变化,需要的朋友可以参考下.ASP.NET 5简介 ASP.NET 5是一个跨时代的改写,所有的功能和模块都进行了独立拆分,做到了彻底解耦.为了这些改写,微软也是蛮 拼的,几乎把.NET Framwrok全部改写了一遍,形成了一个.NET Core的东西. 在.NET C ...
  • Jquery和BigFileUpload实现大文件上传及进度条显示
    Jquery和BigFileUpload实现大文件上传及进度条显示
    这篇文章主要介绍了Jquery和BigFileUpload实现大文件上传及进度条显示的相关资料,非常不错,具有参考借鉴价值,需要的朋友可以参考下实现方法:用到了高山来客 的bigfileupload组件,用高山来客的方法,弹出一个模式窗口,然后不停刷新获取进度,始终觉得体验感不好,于是想到用jquery来实现无刷新进度显示,因为提交页面后, 不能让其刷新页面 ...
  • 利用ASP.NETMVC和Bootstrap快速搭建响应式个人博客站(一)
    利用ASP.NETMVC和Bootstrap快速搭建响应式个人博客站(一)
    这篇文章主要介绍了利用ASP.NET MVC和Bootstrap快速搭建响应式个人博客站一的相关资料,需要的朋友可以参考下1.0 为什么要做这个博客站? 在工作学习中,经常要搜索查找各种各样的资料,每次找到相关资料后都会顺手添加到浏览器书签中,时间一长,书签也就满了.而且下次再点击这个书签时,可能就会忘记当时为什么要添加这个书签了,更有可能书签连接已经无效. ...
  • Swift中内置的集合类型学习笔记
    Swift中内置的集合类型学习笔记
    Swift中自带数组.set.字典三大集合类型,这里将学习过程中的基础的Swift中内置的集合类型学习笔记进行整理,需要的朋友可以参考下一.引言 Swift中提供了3种集合类型,Array数据类型,Set集合类型,Dictionary字典类型.Array用于存放一组有序的数据,数据角标从0开始一次递增:Set用于存放一组无序的数据,数据不可以重复:Dicti ...
猜你喜欢