vue 分页组件开发

分页组件

效果

代码

<template>
  <el-pagination
    v-bind="$attrs"
    background
    :current-page.sync="page"
    :page-size="pageSize"
    :layout="pageLayout"
    :total="total"
    :pager-count="pagerCount"
    class="base-pagination"
    @current-change="handleCurrentChange"
    @size-change="handleSizeChange"
  >
    <span class="el-pagination__total">
       <label style="padding-right: 5px;">跳至</label>
       <el-input-number  v-model="page"
                         :controls="false"
                         size="mini"
                         :min="1"
                         :max="totalPage" @change="handleCurrentChange">
      </el-input-number>
      <label style="padding-left: 5px;">页</label>
    </span>
  </el-pagination>
</template>

<script>
export default {
  props: {
    currentPage: {
      type: Number,
      default: 1
    },
    pageSize: Number,
    total: Number,
    layout: {
      type: String,
      default: '->, prev, pager, next, sizes, slot'
    },
    pagerCount: {
      type: Number,
      default: 7
    }
  },
  computed: {
    page: {
      get () {
        return Math.max(this.currentPage, 1)
      },
      set (val) {
        if (val % 1 === 0) {
          this.handleCurrentChange(val)
        }
      }
    },
    totalPage () {
      // 计算总页数
      return Math.ceil(this.total / this.pageSize) || 1
    },
    pageLayout () {
      return this.layout.replace(/jumper/g, 'slot')
    }
  },
  watch: {
    // 每次total变化时都重新计算当前页
    total (val) {
      let currentPage = this.currentPage
      let pageSize = this.pageSize
      let currentFirstIndex = pageSize * (currentPage - 1)
      if (currentFirstIndex >= val) {
        currentPage = Math.ceil(val / pageSize) || 1
      }
      this.change({
        currentPage,
        pageSize
      })
    }
  },
  methods: {
    handleCurrentChange (currentPage) {
      this.change({ currentPage })
    },
    handleSizeChange (pageSize) {
      this.change({ pageSize })
    },
    change ({ currentPage, pageSize }) {
      let change = false
      currentPage = Math.max(currentPage || this.currentPage, 1)
      pageSize = pageSize || this.pageSize
      if (currentPage !== this.currentPage || pageSize !== this.pageSize) {
        change = true
      }
      if (change) {
        this.$emit('change', {
          currentPage,
          pageSize
        })
      }
    }
  }
}
</script>
<style lang="scss">
  @import '@/theme/theme-default.scss';
  @include b(base-pagination) {
    &.el-pagination {
      font-size: 12px;
      .el-input {
        padding: 0px;
      }
      button {
        background-color: $--color-white;
      }
      .btn-next,  .btn-prev,  .el-pager li {
        background-color:  $--color-white;
        border: 1px solid;
      }
      &.is-background .el-pager li:not(.disabled).active {
        background-color: $--color-primary;
      }
      .el-pagination__sizes .el-input .el-input__inner {
        font-size: 12px;
        height: 28px;
        line-height: 28px;
        &:hover {
          color: $--color-primary;
          border-color: $--color-primary;
       }
      }
      .el-pagination__total {
        span {
          font-size: 12px;
        }
      }
      .el-pager li {
        font-size: 12px;
        margin: 0 2px;
        &.number:hover {
           color: $--color-primary;
         }
      }
      .el-pagination__jump {
        margin-left: 10px;
      }
      .el-input-number {
        width: 32px;
        .el-input .el-input__inner {
          text-align: center;
          padding: 0;
          border-radius: 4px;
          height: 28px;
          font-size: 12px;
        }
      }
      .btn-prev {
        padding-left: 4px;
        padding-right: 2px;
        span {
          font-size: 12px;
        }
      }
      .btn-next {
        padding-left: 2px;
        padding-right: 4px;
        span {
          font-size: 12px;
        }
      }
    }
  }
</style>