FD_Pano/src/components/paging.vue

<template>
  <div class="layer">
    <span class="total">共{{total}}条</span>
    <div class="number">
      <span @click="current = current - 1"><i class="iconfont icon_back"></i></span>

      <template v-if="currMin > min">
        <span @click="current = min">{{min}}</span>
        <span v-if="currMin - 1 > min">…</span>
      </template>

      <span 
        v-for="index in numbers" 
        :key="index" 
        :class="{active: index === current}" 
        @click="current = index">
        {{index}}
      </span>


      <template v-if="currMax < max">
        <span v-if="currMax + 1 < max">…</span>
        <span @click="current = max">{{max}}</span>
      </template>

      <span @click="current = current + 1"><i class="iconfont icon_forward"></i></span>
    </div>

    <div class="goto">
      <span>前往</span>
      <input
        type="text"
        :value="current"
        @blur="ev => ev.target.value = current"
        @keyup.enter="ev => current = Number(ev.target.value)"
      >
      <span>页</span>
    </div>
  </div>
</template>

<script>
export default {
  props: ['paging'],
  data() {
    return {
      ...this.paging
    }
  },
  computed: {
    min() {
      return 1
    },
    max() {
      return Math.ceil(this.total / this.pageSize)
    },
    routineMin() {
      return this.current - Math.ceil(this.showSize / 2)
    },
    routineMax() {
      return this.current + Math.floor(this.showSize / 2)
    },
    currMin() {
      let c = this.max - this.routineMax

      if (this.routineMin <= this.min) {
        return this.min
      } else if (c >= 0) {
        return this.routineMin
      } else if (this.routineMin + c <= this.min) {
        return this.min
      } else {
        return this.routineMin + c
      }
    },
    currMax() {
      let c = this.min - this.routineMin

      if (this.routineMax >= this.max) {
        return this.max
      } else if (c <= 0) {
        return this.routineMax
      } else if (this.routineMax + c >= this.max) {
        return this.max
      } else {
        return this.routineMax + c
      }
    },
    numbers() {
      let total = this.currMax - this.currMin
      let numbers = []

      if (total === 0) {
        numbers.push(1)
      } else {
        for (let i = 0; i <= total; i++) {
          numbers.push(this.currMin + i)
        }
      }
      return numbers
    }
  },
  watch: {
    current(val, old) {
      if (isNaN(this.current)) {
        return this.current = old
      } else if (this.current < this.min) {
        return this.current = this.min
      } else if (this.current > this.max) {
        return this.current = this.max
      }
      this.$emit('changeCurrent', this.current)
    },
    paging() {
        Object.keys(this.paging).forEach(k => this[k] = this.paging[k])
    },
    'paging.total':function () {
        Object.keys(this.paging).forEach(k => this[k] = this.paging[k])
    }
  }
}
</script>

<style lang="less" scoped>
.layer {
  span {
    font-size: 12px;
    color:#202020;
    display: inline-block;
    vertical-align: middle;
    margin: 0 10px;

    &.active {
      color: #0076F6;
    }
  }
  .number span {
    margin: 0 5px;
    cursor: pointer;
    &:first-of-type{
      margin-left: 0;
    }
  }
  div {
    display: inline-block;
  }

  div input {
    background: none;
    border:1px solid #EBEBEB;
    width:46px;
    height:28px;
    border-radius:2px;
    vertical-align: middle;
    text-align: center;
    color: #202020;
  }
  .goto{
    span{
      color: #909090;
    }
  }
}
</style>