wctdreamlandwebsite-front/components/paging.vue

<template>
  <nav>
    <ul class="pagination">
      <li :class="{ disabled: currentPage == 1 }">
        <div @click="setCurrent(1)">首页</div>
      </li>
      <li v-if="currentPage !== 1" :class="{ disabled: currentPage == 1 }">
        <div @click="setCurrent(currentPage - 1)">«</div>
      </li>
      <li
        v-for="(p, index) in grouplist"
        :key="index"
        :class="{ active: currentPage == p.val }"
      >
        <div @click="setCurrent(p.val)">{{ p.text }}</div>
      </li>
      <li
        v-if="currentPage !== page"
        :class="{ disabled: currentPage == page }"
      >
        <div @click="setCurrent(current + 1)">»</div>
      </li>
      <li :class="{ disabled: currentPage == page }">
        <div @click="setCurrent(page)">末页</div>
      </li>
    </ul>
  </nav>
</template>

<script type="es6">
export default{
  props: {
    total: {// 数据总条数
      type: Number,
      default: 0
    },
    display: {// 每页显示条数
      type: Number,
      default: 8
    },
    currentPage: {// 当前页码
      type: Number,
      default: 1
    },
    pagegroup: {// 分页条数
      type: Number,
      default: 5,
      coerce (v) {
        v = v > 0 ? v : 5;
        return v % 2 === 1 ? v : v + 1;
      }
    }
  },
  data(){
    return {
      current: this.currentPage
    }
  },
  computed: {
    page () { // 总页数
        return Math.ceil(this.total);
    },
    grouplist () { // 获取分页页码
        let len = this.page;
        let temp = []
        const list = [];
        const count = Math.floor(this.pagegroup / 2);
        let 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);
      }
      ;
      const 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 {
        const 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:{
      currentPage:{
        handler(val,oldval){
        },
        deep:true
      },
  },
  methods: {
    setCurrent (idx) {
      if (this.current !== idx && idx > 0 && idx < this.page + 1) {
        this.current = idx;
        this.$emit('pagechange', this.current);
      }
    }
  }
}
</script>

<style lang="scss">
.pagination {
  overflow: hidden;
  display: flex;
  margin: 0 auto;
  /*width: 100%;*/
  height: 50px;
  color: #ffecd9;
  justify-content: center;
  align-items: center;
  li,
  .disabled {
    // float: left;
    text-align: center;
    height: 30px;
    border-radius: 5px;
    margin: 3px;
    color: #666;
    list-style: none;

    & :hover {
      background: #fff9e9;
      color: #8b67aa;

      div {
        color: #8b67aa;
      }
    }
    div {
      width: 70px;
      height: 30px;
      // text-align: center;
      font-size: 12px;
      border-radius: 5px;
      color: #fff9e9;
      text-decoration: none;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }
  .active {
    background: #fff9e9;

    div {
      font-weight: bold;
      color: #8b67aa;
    }
  }
}
</style>