基于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 相关文章推荐
document对象execCommand的command参数介绍
Aug 01 Javascript
javascript getElementsByClassName函数
Apr 01 Javascript
基于jquery的不规则矩形的排列实现代码
Apr 16 Javascript
js中settimeout方法加参数的使用实例
Feb 27 Javascript
jQuery解析XML文件同时动态增加js文件的方法
Jun 01 Javascript
jquery控制显示服务器生成的图片流
Aug 04 Javascript
基于jQuery实现select下拉选择可输入附源码下载
Feb 03 Javascript
JavaScript String 对象常用方法总结
Apr 28 Javascript
使用PBFunc在Powerbuilder中支付宝当面付款功能
Oct 01 Javascript
Vue SPA单页应用首屏优化实践
Jun 28 Javascript
jstree中的checkbox默认选中和隐藏示例代码
Dec 29 Javascript
Angular CLI发布路径的配置项浅析
Mar 29 Javascript
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基于单例模式实现的数据库操作基类
2016/01/15 PHP
PHP如何防止XSS攻击与XSS攻击原理的讲解
2019/03/22 PHP
解密效果
2006/06/23 Javascript
深入认识JavaScript中的函数
2007/01/22 Javascript
关于UTF-8的客户端用AJAX方式获取GB2312的服务器端乱码问题的解决办法
2010/11/30 Javascript
JQuery操作iframe父页面与子页面的元素与方法(实例讲解)
2013/11/20 Javascript
js中创建对象的几种方式示例介绍
2014/01/26 Javascript
jQuery Validation PlugIn的使用方法详解
2015/12/18 Javascript
jQuery Ajax 异步加载显示等待效果代码分享
2016/08/01 Javascript
JS上传图片预览插件制作(兼容到IE6)
2016/08/07 Javascript
基于BootStrap实现局部刷新分页实例代码
2016/08/08 Javascript
Bootstrapvalidator校验、校验清除重置的实现代码(推荐)
2016/09/28 Javascript
vue2.0实现倒计时的插件(时间戳 刷新 跳转 都不影响)
2017/03/30 Javascript
webpack配置的最佳实践分享
2017/04/21 Javascript
js 简易版滚动条实例(适用于移动端H5开发)
2017/06/26 Javascript
vue中的scope使用详解
2017/10/29 Javascript
Vue使用高德地图搭建实时公交应用功能(地图 + 附近站点+线路详情 + 输入提示+换乘详情)
2018/05/16 Javascript
Element-ui DatePicker显示周数的方法示例
2019/07/19 Javascript
layui.tree组件的使用以及搜索节点功能的实现
2019/09/26 Javascript
详解webpack的文件监听实现(热更新)
2020/09/11 Javascript
[01:03:22]LGD vs OG 2018国际邀请赛淘汰赛BO3 第一场 8.25
2018/08/29 DOTA
Python使用poplib模块和smtplib模块收发电子邮件的教程
2016/07/02 Python
Python实现的爬虫功能代码
2017/06/24 Python
Python机器学习之K-Means聚类实现详解
2018/02/22 Python
深入理解Python爬虫代理池服务
2018/02/28 Python
使用memory_profiler监测python代码运行时内存消耗方法
2018/12/03 Python
稀有和绝版书籍:Biblio.com
2017/02/02 全球购物
英国领先的电子、技术和办公用品购物网站:Ebuyer
2018/04/04 全球购物
swtich是否能作用在byte上,是否能作用在long上,是否能作用在String上
2013/07/06 面试题
编辑硕士自荐信范文
2013/11/27 职场文书
国旗下的演讲稿
2014/05/08 职场文书
大学自主招生推荐信
2014/05/10 职场文书
关于随地扔垃圾的检讨书
2014/09/30 职场文书
2014年生活老师工作总结
2014/12/23 职场文书
检讨书大全
2015/01/27 职场文书
使用CSS自定义属性实现骨架屏效果
2022/06/21 HTML / CSS