vue分页组件（二）

组件样式

 代码

<template>
  <div class="paging-content">
    <div class="fl" v-if="operatePre&&!simple">
      每页
        <el-select v-model="pageSize" style=" 60px" @change="pageSizeChange">
            <el-option
            v-for="(item, index) in pageSizeOpts"
            :key="index"
            :label="item"
            :value="item">
            </el-option>
        </el-select>条
      <span style="margin-left:15px;" v-if="operateTotal">共 {{total}} 条记录</span>
    </div>
    <div class="fl" v-if="simple">
        <el-select v-model="pageSize" style=" 60px" @change="pageSizeChange">
            <el-option
            v-for="(item, index) in pageSizeOpts"
            :key="index"
            :label="item"
            :value="item">
            </el-option>
        </el-select>
    </div>
    <div class="paging-box">
      <ul class="pagination">
        <li :class="{'disabled': current == 1}" v-if="showPrePage" class="page-pre">
          <a href="javascript:;" @click="setCurrent(1)">
            <span class="icon iconfont icon-diyiye"></span> 
          </a>
        </li>
        <li :class="{'disabled': current == 1}" class="page-pre">
          <a href="javascript:;" @click="setCurrent(current - 1)">
            <span class="icon iconfont icon-shangyiye"></span>
          </a>
        </li>        
        <li v-for="p in grouplist" :class="{'active': current == p.val}" :key="p.val"><a href="javascript:;"
                                                                            @click="setCurrent(p.val)"> {{ p.text }} </a>
        </li>        
        <li :class="{'disabled': current == page}" class="page-after">
          <a href="javascript:;" @click="setCurrent(current + 1)">
            <span class="icon iconfont icon-xiayiye"></span>
          </a>
        </li>
        <li :class="{'disabled': current == page}" v-if="showPrePage" class="page-after">
          <a href="javascript:;" @click="setCurrent(page)"> 
            <span class="icon iconfont icon-weiye"></span>
          </a>
        </li>
        <li class="go-to" style="display:none;">
            <input type="text" v-model="goPage" />
            <button type="button" @click="goToPage">跳转</button>
        </li>
      </ul>      
    </div>
    <span v-if="showTotalPage" style="padding:0 10px;">共{{page}}页</span>
  </div>
</template>
<script>
export default {
  name: 'pagination',
  data () {
    return {
      goPage: '1',
      current: this.currentPage
    }
  },
  props: {
    total: {// 数据总条数
      type: Number,
      default: 0
    },
    operatePre: { // 是否显示每页多少条
      type: Boolean,
      default: true
    },
    operateTotal: { // 是否显示总数
      type: Boolean,
      default: true
    },
    simple: { // 是否简单模式 只有页码
      type: Boolean,
      default: false
    },
    showPrePage: { // 是否显示上一页
      type: Boolean,
      default: false
    },
    showTotalPage: { // 是否显示总页数
      type: Boolean,
      default: false
    },
    pageSizeOpts: { // 每页多少条选项
      type: Array,
      default: function(){
        return [10, 20, 30]
      }
    },
    pageSize: {// 每页显示条数
      type: Number,
      default: 10
    },
    currentPage: {// 当前页码
      type: Number,
      default: 1
    },
    pagegroup: {// 分页条数
      type: Number,
      default: 5,
      coerce: function (v) {
        v = v > 0 ? v : 5
        return v % 2 === 1 ? v : v + 1
      }
    }
  },
  computed: {
    page: function () { // 总页数
      return Math.ceil(this.total / this.pageSize)
    },
    grouplist: function () { // 获取分页页码
      var len = this.page; var temp = []; var list = []; var count = Math.floor(this.pagegroup / 2); var center = this.current
      if (len <= this.pagegroup) {
        while (len--) {
          temp.push({ text: this.page - len, val: this.page - len })
        }
        ;
        return temp
      }
      while (len--) {
        temp.push(this.page - len)
      }
      ;
      var idx = temp.indexOf(center);
      (idx < count) && (center = center + count - idx);
      (this.current > this.page - count) && (center = this.page - count)
      temp = temp.splice(center - count - 1, this.pagegroup)
      do {
        var t = temp.shift()
        list.push({
          text: t,
          val: t
        })
      } while (temp.length)
      if (this.page > this.pagegroup) {
        (this.current > count + 1) && list.unshift({ text: '...', val: list[0].val - 1 });
        (this.current < this.page - count) && list.push({ text: '...', val: list[list.length - 1].val + 1 })
      }
      return list
    }
  },
  watch: {
    'limit': function (newVal, oldVal) { // 最多显示多少个页码，多出点省略号
      if (newVal != oldVal && oldVal != undefined) {
        this.$dispatch('page-limit-change', newVal)
      }
    }
  },
  methods: {
    // 页码点击事件
    setCurrent (idx) {
      if (this.current != idx && idx > 0 && idx < this.page + 1) {
        this.current = idx
        this.$emit('pagechange', this.current)
      }
    },
    // 跳转方法
    goToPage () {
      this.setCurrent(this.goPage)
    },
    // 每页多少条改变事件
    pageSizeChange (val) {
      this.$emit('page-size-change', val)
    }
  }
}
</script>
<style lang="stylus" scoped>
  .paging-content {
    position: relative;
    margin-top: 20px;
    height: 26px;
    line-height: 26px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    > div {
      font-size: 14px;
    }
    .ivu-select{
      color: #666;
    }
    .fl {
      float: left;
      color: #666;
    }
    .paging-box{
        .pagination {
        overflow: hidden;
            li {
                float: left;
                height: 26px;
                 26px;
                margin-left: 4px;
                //  auto;
                // border-radius: 5px;
                color: #999;
                /* &:hover {
                    a {
                        color: #23527c;
                        background-color: #eee;
                    }
                } */
                a {
                    display: block;
                    // padding: 6px 12px;
                    height: 100%;
                     100%;
                    line-height: 26px;
                    text-align: center;
                    font-size: 14px;
                    color: #666;
                    border-radius: 15px;
                    // border: 1px solid #ddd;
                    text-decoration: none
                    .iconfont{
                      font-size: 12px;
                      color: #999;
                    }
                    &:hover{
                      background: #f5f5f5;
                    }
                }
            }
            li.disabled a{
              &:hover{
                      background: none;
              }
              .iconfont{
                color: rgba(153, 153, 153, 0.3);
              }
            }
            .page-pre,.page-after{
                a{
                     34px;
                }
            }
            .active {
                a {
                    background: rgba(58,133,252,0.15);
                    // border-color: #337ab7;
                    color: #4C8CF0;
                }
            }
        }
    }

  }
</style>