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

序言

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

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

页数大于999页

首页或尾页disabled

10页之内显示

Usage

参数

pageCount: 整数,代表总页数

监听事件

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

父组件调用方法 index.vue

分页组件 paginator.vue

  @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;
 }
      }
    }
  }

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持考高分网。