基于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 相关文章推荐
javascript 日期时间 转换的方法
Feb 21 Javascript
文字不间断滚动(上下左右)实例代码
Apr 21 Javascript
js select option对象小结
Dec 20 Javascript
第一次接触Bootstrap框架
Oct 24 Javascript
jQuery中$.grep() 过滤函数 数组过滤
Nov 22 Javascript
Bootstrap源码解读按钮(5)
Dec 23 Javascript
JS中Select下拉列表类(支持输入模糊查询)功能
Jan 17 Javascript
移动端刮刮乐的实现方式(js+HTML5)
Mar 23 Javascript
get  post jsonp三种数据交互形式实例详解
Aug 25 Javascript
详谈Node.js之操作文件系统
Aug 29 Javascript
微信小程序wx.navigateTo中events属性实现页面间通信传值,数据同步
Jul 13 Javascript
在 HTML 页面中使用 React的场景分析
Jan 18 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
怎么样可以把 phpinfo()屏蔽掉?
2006/11/24 PHP
PHPExcel内存泄漏问题解决方法
2015/01/23 PHP
php比较相似字符串的方法
2015/06/05 PHP
laravel多条件查询方法(and,or嵌套查询)
2019/10/09 PHP
js导入导出excel(实例代码)
2013/11/25 Javascript
一个简单的实现下拉框多选的插件可移植性比较好
2014/05/05 Javascript
5个数组Array方法: indexOf、filter、forEach、map、reduce使用实例
2015/01/29 Javascript
JavaScript实现函数返回多个值的方法
2015/06/09 Javascript
在JavaScript中操作时间之getMonth()方法的使用
2015/06/10 Javascript
jQuery实现的个性化返回底部与返回顶部特效代码
2015/10/30 Javascript
AngularJS初始化静态模板详解
2016/01/14 Javascript
使用JQuery中的trim()方法去掉前后空格
2016/09/16 Javascript
Bootstrap源码学习笔记之bootstrap进度条
2016/12/24 Javascript
jQuery复合事件结合toggle()方法的用法示例
2017/06/10 jQuery
js 原生判断内容区域是否滚动到底部的实例代码
2017/11/15 Javascript
vue中接口域名配置为全局变量的实现方法
2018/09/20 Javascript
react组件从搭建脚手架到在npm发布的步骤实现
2019/01/09 Javascript
vue实现微信浏览器左上角返回按钮拦截功能
2020/01/18 Javascript
基于vue--key值的特殊用处详解
2020/07/31 Javascript
python和ruby,我选谁?
2017/09/13 Python
Python IDLE清空窗口的实例
2018/06/25 Python
对python内置map和six.moves.map的区别详解
2018/12/19 Python
Python面向对象程序设计示例小结
2019/01/30 Python
Django集成搜索引擎Elasticserach的方法示例
2019/06/04 Python
Python 正则表达式 re.match/re.search/re.sub的使用解析
2019/07/22 Python
对python3中的RE(正则表达式)-详细总结
2019/07/23 Python
Python获取时间戳代码实例
2019/09/24 Python
python子线程退出及线程退出控制的代码
2019/10/16 Python
使用TensorFlow搭建一个全连接神经网络教程
2020/02/06 Python
Python尾递归优化实现代码及原理详解
2020/10/09 Python
利用promise及参数解构封装ajax请求的方法
2021/03/24 Javascript
大学生求职中的自我评价
2013/10/01 职场文书
中专毕业生自我鉴定
2014/02/02 职场文书
2015年读书月活动总结
2015/03/26 职场文书
python如何读取.mtx文件
2021/04/22 Python
方法汇总:Python 安装第三方库常用
2022/04/26 Python