vue 分頁 pagination

<template>
  <div class="pagination_box">
    <div class="pagination_wrap">
      <ul class="clearfix">

        <!-- prev -->
        <li class="first btn" :class="{'disabled': current === 1}" @click="setCurrent(current - 1)">
          <a href="javascript:;"><em></em></a>
        </li>

        <!-- 頁數列表 -->
        <li v-for="(item, index) in grouplist" :key="index">
          <a href="javascript:;" @click="setCurrent(item.val)" :class="{'active': current == item.val}">{{item.text}}</a>
        </li>

        <!-- next -->
        <li class="last btn" :class="{'disabled': current === page}" @click="setCurrent(current + 1)">
          <a href="javascript:;"><em></em></a>
        </li>

      </ul>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'pagination',
    props: {
      // 當前頁碼
      currentPage: {
        type: Number,
        default: 1
      },
      // 每頁顯示條數
      display: {
        type: Number,
        default: 10
      },
      // 總頁數
      total: {
        type: Number,
        default: 0
      },
      // 分頁條數
      pagegroup: {
        type: Number,
        default: 5,
        coerce: function (v) {
          v = v > 0 ? v : 5;
          return v % 2 === 1 ? v : v + 1;
        }
      }
    },
    data() {
      return {
        pages: null
      }
    },
    computed: {
      /**
       * 返回當前頁碼
       */
      current() {
        return this.currentPage
      },
      /**
       * 顯示總頁數
       */
      page() {
        return Math.ceil(this.total / this.display)
      },
      /**
       * 獲取分頁頁碼
       */
      grouplist() {
        var len = this.page,
          temp = [],
          list = [],
          count = Math.floor(this.pagegroup / 2),
          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;
      }
    },
    methods: {
      /**
       * 設置當前頁
       * @param {String} num  // 當前頁數
       */
      setCurrent(num) {
        let idx = parseFloat(num)
        // 如果是點擊當前頁, 當前頁面大於0, 小於總頁數
        if (this.current !== idx && idx > 0 && idx < this.page + 1) {
          this.$emit("change", idx)
          this.pages = null
        }
      }
    },
  }
</script>
<style lang="stylus">
  .pagination_box {
  padding: 0 10px;
  media-style('padding', (0 10px) (0 20px) (0 20px) (0 30px));
  text-align: right;

  .pagination_wrap {
    display: inline-block;
    padding: 10px 0;

    media-style('padding', (10px 0) (12px 0) (16px 0) (22px 0));

    ul {
      li {
        float: left;
        position: relative;
        width: 24px;
        height: 24px;
        margin: 0 1px;
        media-style('margin', (0 2px) (0 4px) (0 4px) (0 6px))

        a {
          display: block;
          font-size: 12px;
          text-align: center;
          line-height: 24px;
          position: relative;
          border: 1px solid transparent;
          color: #000000;
          transition();

          &:hover,
          &.active {
            color: $base-button-background;
            border-color: $base-button-background;
          }
        }

        &.btn {
          a {
            height: 100%;

            &:hover {
              em {
                background: $base-button-background;
              }
            }

            em {
              position: absolute;
              left: 50%;
              top: 50%;
              width: 6px;
              height: 6px;
              background: #000000;
              transition();

              &:after {
                content: '';
                position: absolute;
                left: 50%;
                top: 50%;
                width: 6px;
                height: 6px;
                margin: -4px 0 0 -2px;
                background: #ffffff;
                transform: rotate(0deg);
              }
            }
          }
        }

        &.first {
          em {
            margin: -3px 0 0 -2px;
            transform: rotate(45deg);
          }
        }

        &.last {
          em {
            margin: -3px 0 0 -4px;
            transform: rotate(225deg);
          }
        }

        &.btn.disabled {
          em {
            background: #C1C6CD;
          }

          a {
            &:hover {
              color: #C1C6CD;
              border-color: transparent;

              em {
                background: #C1C6CD;
              }
            }
          }
        }
      }

    }

  }
}
</style>