基于vue实现分页/翻页组件paginator示例


Posted in Javascript onMarch 09, 2017

序言

项目需要自己写了一个基于vue的paginator分享出来,欢迎各路好汉来指教

当页数小于999(包括999)页

基于vue实现分页/翻页组件paginator示例

页数大于999页

基于vue实现分页/翻页组件paginator示例

首页或尾页disabled

基于vue实现分页/翻页组件paginator示例

10页之内显示

基于vue实现分页/翻页组件paginator示例

Usage

参数

pageCount: 整数,代表总页数

监听事件

@togglePage: 监听切换页面事件,可以获取到当前前往页的页数

父组件调用方法 index.vue

<template lang="html">
  <div>
    <paginator :pageCount="pageCount" @togglePage="togglePage($event)"></paginator>
  </div>
</template>

<script>
export default {
  data(){
    return{
      //总页数
      pageCount: 24
    }
  },
  methods:{
    togglePage(indexPage){
      //打印出当前页数
      console.log(indexPage);
    },
  }
}
</script>

分页组件 paginator.vue

<template lang="html">
  <div class="pagination">
    <ul>
      <li :class="{disabled: curPage == 1}" @click="prevPage" v-if="pageCount > 1">上一页</li>
      <li :class="{active: curPage == 1}" @click="page(1)">1</li>
      <li class="ellipsis" v-show="curPage > 5 && pageCount > 10">...</li>
      <li :class="{active: curPage == index+offset}" v-for="(item,index) in middlePages" @click="page(index+offset)">{{index+offset}}</li>
      <li class="ellipsis" v-show="curPage < bigLimit && pageCount > 10">...</li>
      <li :class="{active: curPage == pageCount}" @click="page(pageCount)" v-if="pageCount > 1">{{pageCount}}</li>
      <li :class="{disabled: curPage == pageCount}" @click="nextPage" v-if="pageCount > 1">下一页</li>
    </ul>
  </div>
</template>

<script>
  export default {
    props:['pageCount'],
    data(){
      return {
        curPage: 1,
      };
    },
    computed:{
      middlePages(){
        if(this.pageCount <= 2){
          return 0;
        }else if(this.pageCount> 2 && this.pageCount <= 10){
          return this.pageCount-2;
        }else{
          return this.curPage > 999 ? 5 : 8;
        }
      },
      bigLimit(){
        return this.middlePages > 5 ? this.pageCount-6 : this.pageCount -3;
      },
      offset(){
        if(this.curPage <= 5){
          return 2;
        }else if(this.curPage >= this.bigLimit){
          return this.bigLimit-2;
        }else{
          return this.middlePages > 5 ? this.curPage-3 : this.curPage-2;
        }
      }
    },
    methods:{
      page(indexPage){
        this.$emit('togglePage',indexPage);
        this.curPage = indexPage;
      },
      prevPage(){
        if(this.curPage != 1){
          this.page(this.curPage-1);
        }
      },
      nextPage(){
        if(this.curPage != this.pageCount){
          this.page(this.curPage+1);
        }
      }
    }
  };
</script>

<style lang="css" scoped>
  @import 'styles/vars.css';
  .pagination{
    width: 660px;
    text-align: center;
    ul{
      margin: 40px 0 60px 0;
      li{
        cursor: pointer;
        display: inline-block;
        padding: 5px 9px;
        border: 1px solid #e1e1eb;
        margin-right: 5px;
        &.active{
          background: #4078c0;
          color: #fff;
        }
        &.ellipsis{
          border: none;
        }
        &.disabled{
          color: #dcdcdc;
        }
      }
    }
  }
</style>

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

Javascript 相关文章推荐
JS window.opener返回父页面的应用
Oct 24 Javascript
到处都是jQuery选择器的年代 不了解它们的性能,行吗
Jun 18 Javascript
jQuery 1.8 Release版本发布了
Aug 14 Javascript
JavaScript中获取高度和宽度函数总结
Oct 08 Javascript
jQuery动态效果显示人物结构关系图的方法
May 07 Javascript
jQuery div拖拽用法实例
Jan 14 Javascript
微信小程序中用WebStorm使用LESS
Mar 08 Javascript
JS操作时间 - UNIX时间戳的简单介绍(必看篇)
Aug 16 Javascript
使用MUI框架模拟手机端的下拉刷新和上拉加载功能
Sep 04 Javascript
Vue实现PopupWindow组件详解
Apr 28 Javascript
使用pkg打包Node.js应用的方法步骤
Oct 19 Javascript
vue实现无缝轮播效果(跑马灯)
May 14 Vue.js
vue.js利用Object.defineProperty实现双向绑定
Mar 09 #Javascript
javascript遍历json对象的key和任意js对象属性实例
Mar 09 #Javascript
微信小程序 五星评价功能的实现
Mar 09 #Javascript
javascript实现数据双向绑定的三种方式小结
Mar 09 #Javascript
jQuery插件HighCharts实现2D柱状图、折线图的组合多轴图效果示例【附demo源码下载】
Mar 09 #Javascript
Vue监听数据对象变化源码
Mar 09 #Javascript
html+javascript+bootstrap实现层级多选框全层全选和多选功能
Mar 09 #Javascript
You might like
php定时计划任务的实现方法详解
2013/06/06 PHP
浅谈PHP正则表达式中修饰符/i, /is, /s, /isU
2014/10/21 PHP
php实现session共享的实例方法
2019/09/19 PHP
js本身的局限性 别让javascript做太多事
2010/03/23 Javascript
来自国外的14个图片放大编辑的jQuery插件整理
2010/10/20 Javascript
自己动手手写jQuery插件总结
2015/01/20 Javascript
javascript实现tab切换特效
2015/11/12 Javascript
跟我学习javascript的prototype原型和原型链
2015/11/18 Javascript
BootStrap智能表单demo示例详解
2016/06/13 Javascript
适用于手机端的jQuery图片滑块动画
2016/12/09 Javascript
详解Angular的8个主要构造块
2017/06/20 Javascript
vue服务端渲染页面缓存和组件缓存的实例详解
2018/09/18 Javascript
js操作table中tr的顺序实现上移下移一行的效果
2018/11/22 Javascript
微信小程序实现分享商品海报功能
2019/09/30 Javascript
Nuxt v-bind绑定img src不显示的解决
2019/12/05 Javascript
TypeScript之调用栈的实现
2019/12/31 Javascript
[47:18]完美世界DOTA2联赛循环赛 IO vs FTD BO2第一场 11.05
2020/11/06 DOTA
Python ldap实现登录实例代码
2016/09/30 Python
Python基于time模块求程序运行时间的方法
2017/09/18 Python
python导出chrome书签到markdown文件的实例代码
2017/12/27 Python
python爬虫爬取快手视频多线程下载功能
2018/02/28 Python
在jupyter notebook中调用.ipynb文件方式
2020/04/14 Python
解决Python3.7.0 SSL低版本导致Pip无法使用问题
2020/09/03 Python
纯css3制作网站后台管理面板
2014/12/30 HTML / CSS
用canvas实现图片滤镜效果附演示
2013/11/05 HTML / CSS
办公室秘书自我鉴定
2014/01/18 职场文书
员工试用期考核自我鉴定
2014/04/13 职场文书
招股说明书范本
2014/05/06 职场文书
船舶工程技术专业求职信
2014/08/07 职场文书
2014年会计人员工作总结
2014/12/10 职场文书
学生党员检讨书范文
2014/12/27 职场文书
拾金不昧表扬信
2015/01/16 职场文书
2015年幼儿园安全工作总结
2015/05/12 职场文书
员工离职证明范本
2015/06/12 职场文书
python之np.argmax()及对axis=0或者1的理解
2021/06/02 Python
MySQL实战记录之如何快速定位慢SQL
2022/03/23 MySQL