FD_Pano/src/views/material/components/paging.vue

<template>
  <div class="layer" v-if="max>=1">
    <div class="number">
      <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 v-if="current < max" class="next" @click="current = current + 1"></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>
@wh:32px;
.layer {
  span {
    font-size: 16px;
    display: inline-block;
    vertical-align: middle;
    margin: 0 10px;
    color: #202020;
    font-weight: bold;
    width: @wh;
    height: @wh;
    text-align: center;
    line-height: @wh;
    &.active {
      color: #fff;
      background: #202020;
    }
  }
  .number span {
    margin: 0 5px;
    cursor: pointer;
    &:first-of-type{
      margin-left: 0;
    }
  }
  div {
    display: inline-block;
  }

  div input {
    background: none;
    border: 1px solid rgba(85, 85, 85, 1);
    width: 46px;
    height: 28px;
    border-radius: 2px;
    vertical-align: middle;
    text-align: center;
    color: #fff;
  }

  .next {
    position: relative;
    display: inline-flex;
    align-items: center;
    height: 22px;
    vertical-align: middle;
    &::before {
      content: "";
      background-color: #111;
      height: 2px;
      transition: 0.3s ease all;
      width: 8px;
      transform-origin: 0 0;
    }
    &::after {
      width: 0;
      transition: 0.2s ease all;
      content: "";
      height: 0;
      border-color: transparent transparent transparent #011111;
      border-style: solid;
      border-width: 5px 0 5px 8px;
    }

    &:hover {
      &::before {
        transform: scaleX(2);
      }
      &::after {
        transform: translateX(5px);
      }
    }
  }

  .layout .next-page-item:after {
    width: 0;
    height: 0;
    border-color: transparent transparent transparent #011111;
    border-style: solid;
    border-width: 5px 0 5px 8px;
  }
}
</style>