一个可复用的vue分页组件


Posted in Javascript onMay 15, 2017

不废话,先上组件文件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'
  }
},

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

Javascript 相关文章推荐
出现“不能执行已释放的Script代码”错误的原因及解决办法
Aug 29 Javascript
JavaScript 小型打飞机游戏实现原理说明
Oct 28 Javascript
window.returnValue使用方法示例介绍
Jul 03 Javascript
jQuery EasyUI Dialog拖不下来如何解决
Sep 28 Javascript
深入浅析JavaScript中prototype和proto的关系
Nov 15 Javascript
ECMAScript6轮播图实践知识总结
Aug 17 Javascript
jQuery在ie6下无法设置select选中的解决方法详解
Sep 20 Javascript
浅谈通过JS拦截 pushState和replaceState事件
Jul 21 Javascript
JavaScript中filter的用法实例分析
Feb 27 Javascript
jQuery轮播图功能制作方法详解
Dec 03 jQuery
js实现无刷新监听URL的变化示例代码详解
Jun 03 Javascript
如何HttpServletRequest文件对象并储存
Aug 14 Javascript
jQuery操作css样式
May 15 #jQuery
Node.JS文件系统解析实例详解
May 15 #Javascript
使用Browserify来实现CommonJS的浏览器加载方法
May 14 #Javascript
js实现股票实时刷新数据案例
May 14 #Javascript
Ext JS 实现建议词模糊动态搜索功能
May 13 #Javascript
js,jq,css多方面实现简易下拉菜单功能
May 13 #Javascript
easyui combogrid实现本地模糊搜索过滤多列
May 13 #Javascript
You might like
一个php作的文本留言本的例子(四)
2006/10/09 PHP
php设计模式 Mediator (中介者模式)
2011/06/26 PHP
2个比较经典的PHP加密解密函数分享
2014/07/01 PHP
HTML中嵌入PHP的简单方法
2016/02/16 PHP
PHP实现微信商户支付企业付款到零钱功能
2018/09/30 PHP
用javascript替换URL中的参数值示例代码
2014/01/27 Javascript
javascript判断数组内是否重复的方法
2015/04/21 Javascript
JavaScript简单修改窗口大小的方法
2015/08/03 Javascript
基于jQuery通过jQuery.form.js插件实现异步上传
2015/12/13 Javascript
javascript动画之模拟拖拽效果篇
2016/09/26 Javascript
jQuery分页插件jquery.pagination.js使用方法解析
2017/02/09 Javascript
webpack配置文件和常用配置项介绍
2017/04/28 Javascript
javaScript之split与join的区别(详解)
2017/11/08 Javascript
微信小程序仿朋友圈发布动态功能
2018/07/15 Javascript
jquery ajax加载数据前台渲染方式 不用for遍历的方法
2018/08/09 jQuery
JavaScript&quot;模拟事件&quot;的注意要点详解
2019/02/13 Javascript
微信小程序new Date()方法失效问题解决方法
2019/07/29 Javascript
python调用Moxa PCOMM Lite通过串口Ymodem协议实现发送文件
2014/08/15 Python
Python中下划线的使用方法
2015/03/27 Python
Django基于ORM操作数据库的方法详解
2018/03/27 Python
详解python里的命名规范
2018/07/16 Python
利用Python如何实现一个小说网站雏形
2018/11/23 Python
使用python读取.text文件特定行的数据方法
2019/01/28 Python
Python中调用其他程序的方式详解
2019/08/06 Python
python可视化篇之流式数据监控的实现
2019/08/07 Python
python3.6环境下安装freetype库和基本使用方法(推荐)
2020/05/10 Python
pandas数据处理之绘图的实现
2020/06/15 Python
纯CSS3实现3D旋转书本效果
2016/03/21 HTML / CSS
美国高级工作服品牌:Carhartt
2018/01/25 全球购物
贝玲妃英国官网:Benefit英国
2018/02/03 全球购物
Dr.Jart+美国官网:韩国药妆品牌
2019/01/18 全球购物
护理毕业生自我鉴定
2014/02/11 职场文书
大学运动会加油稿200字(5篇)
2014/09/27 职场文书
研究生就业推荐表导师评语
2014/12/31 职场文书
2015年大学组织委员个人工作总结
2015/10/23 职场文书
2019年中学生的思想品德评语集锦
2019/12/19 职场文书