基于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的时候写的学习笔记
Dec 30 Javascript
JavaScript在XHTML中的用法详解
Apr 11 Javascript
input标签内容改变的触发事件介绍
Jun 18 Javascript
Css3制作变形与动画效果
Jul 24 Javascript
javascript实现简单的分页特效
Aug 12 Javascript
JavaScript提高网站性能优化的建议(二)
Jul 24 Javascript
Javascript中 带名 匿名 箭头函数的重要区别(推荐)
Jan 29 Javascript
Vue.js组件tab实现选项卡切换
Mar 23 Javascript
JS实现的简单拖拽购物车功能示例【附源码下载】
Jan 03 Javascript
详解如何在Vue项目中发送jsonp请求
Oct 25 Javascript
Vuex实现数据共享的方法
Dec 20 Javascript
小程序自定义模板实现吸顶功能
Jan 08 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使用mb_check_encoding检查字符串在指定的编码里是否有效
2013/11/07 PHP
PHP对象递归引用造成内存泄漏分析
2014/08/28 PHP
PHP查找与搜索数组元素方法总结
2015/06/12 PHP
PHP代码实现爬虫记录――超管用
2015/07/31 PHP
PHP中Notice错误常见解决方法
2017/04/28 PHP
javascript中常用编程知识
2013/04/08 Javascript
Vue配合iView实现省市二级联动的示例代码
2018/07/27 Javascript
vue element table 表格请求后台排序的方法
2018/09/28 Javascript
单页面vue引入百度统计的使用方法示例详解
2018/10/13 Javascript
Vue press 支持图片放大功能的实例代码
2018/11/09 Javascript
命令行批量截图Node脚本示例代码
2019/01/25 Javascript
微信小程序的mpvue框架快速上手指南
2019/05/15 Javascript
Vue最新防抖方案(必看篇)
2019/10/30 Javascript
Python help()函数用法详解
2014/03/11 Python
利用Python和OpenCV库将URL转换为OpenCV格式的方法
2015/03/27 Python
利用python求相邻数的方法示例
2017/08/18 Python
python实现八大排序算法(1)
2017/09/14 Python
Python绘制二维曲线的日常应用详解
2019/12/04 Python
python将时分秒转换成秒的实例
2019/12/07 Python
Python对Tornado请求与响应的数据处理
2020/02/12 Python
python里的单引号和双引号的有什么作用
2020/06/17 Python
Python实现快速大文件比较代码解析
2020/09/04 Python
python程序实现BTC(比特币)挖矿的完整代码
2021/01/20 Python
什么是GWT的Entry Point
2013/08/16 面试题
大型晚会策划方案
2014/02/06 职场文书
护士自我鉴定怎么写
2014/02/07 职场文书
会计员岗位职责
2014/03/15 职场文书
超市创业计划书
2014/04/24 职场文书
建筑工地大门标语
2014/06/18 职场文书
2015年党员自评材料
2014/12/17 职场文书
网络管理员岗位职责
2015/02/12 职场文书
中学生自我评价2015
2015/03/03 职场文书
2015年计算机教师工作总结
2015/07/22 职场文书
2016党员学习心得体会范文
2016/01/23 职场文书
《社戏》教学反思
2016/02/22 职场文书
基于python制作简易版学生信息管理系统
2021/04/20 Python