vue自定义分页组件

/**
 * 使用方法：
 * <ui-page-count :query="doSubmit" :total="result.numbrs"></ui-page-count>
 *
 * query需要传入查询方法 total传入总条数
 */

<template>
  <div class="select-frame ui-page-count">
    <a class="left" @click="prev" :class="{'active':groupIndex>1}">上一组</a>
    <ul class="page-list">
      <template v-if="pageCount<=5">
        <li
          v-for="(page,index) in pageCount"
          :key="index"
          @click="go(index)"
          :class="{'active':index==pageIndex}"
        >{{page}}</li>
      </template>
      <template v-else v-for="(page,index) in pageCount">
        <div :key="index" style="display:inline-block">
          <!-- 1 -->
          <li v-show="index==0" @click="go(index)" :class="{'active':index==pageIndex}">{{page}}</li>
          <!-- left -->
          <li class="left" title="向前4页" v-show="leftEllipsis&&index==0" @click="quickJump('left')"></li>
          <li
            @click="go(index)"
            :class="{'active':index==pageIndex}"
            v-show="index!=0&&index!=pageCount-1&&index<pageIndex+3&&index>pageIndex-3"
          >{{page}}</li>
          <!-- right -->
          <li
            class="right"
            title="向后4页"
            v-show="rightEllipsis&&index+1==pageCount"
            @click="quickJump('right')"
          ></li>
          <!-- last -->
          <li
            v-show="index+1==pageCount"
            @click="go(index)"
            :class="{'active':index==pageIndex}"
          >{{page}}</li>
        </div>
      </template>
    </ul>
    <a class="right" @click="next" :class="{'active':groupIndex<Math.ceil(pageCount/4)}">下一组</a>
    <span>跳转到</span>
    <input type="text" v-model="toPageIndex" />
    <span>每页</span>
    <div>
      <input type="text" v-select="List" v-model="pageNum" />
    </div>
    <span>/共{{total}}条</span>
    <button @click="goPage">确定</button>
  </div>
</template>
<script>
export default {
  props: {
    query: {
      type: Function,
      required: true
    },
    total: {
      default: 0 //总条数
    }
  },
  mounted() {
    this.List = [2, 10, 50, 100, 500];
  },
  data() {
    return {
      groupIndex: 1, // 当前组位置
      pageIndex: 0, //当前的页位置
      pageNum: 10, //每页多少条
      List: "",
      toPageIndex: "", //跳转到第几页
      leftEllipsis: false, //左省略号
      rightEllipsis: false //右省略号
    };
  },
  computed: {
    pageCount() {
      return Math.ceil(this.total / this.pageNum);
    }
  },
  watch: {
    pageIndex(nV, oV) {
      if (nV != oV) {
        //发送查询交易
        this.query(+this.pageNum + "", +nV + 1 + "");
      }
    },
    pageNum(nV, oV) {
      if (nV != oV) {
        this.pageIndex = 0;
        this.groupIndex = 1;
        //发送查询交易
        this.query(+nV + "", +this.pageIndex + 1 + "");
      }
    },
    pageCount(nV, oV) {
      this.pageIndex + 1 - 4 > 0
        ? (this.leftEllipsis = true)
        : (this.leftEllipsis = false);
      this.pageCount - this.pageIndex > 4
        ? (this.rightEllipsis = true)
        : (this.rightEllipsis = false);
    }
  },
  methods: {
    ellipsisEvent() {
      this.pageIndex + 1 - 4 > 0
        ? (this.leftEllipsis = true)
        : (this.leftEllipsis = false);
      this.pageCount - this.pageIndex > 4
        ? (this.rightEllipsis = true)
        : (this.rightEllipsis = false);
    },
    quickJump(direction) {
      if (direction == "right") {
        this.pageIndex = this.pageIndex + 4;
        this.ellipsisEvent();
      } else {
        this.pageIndex = this.pageIndex - 4;
        this.ellipsisEvent();
      }
      this.groupIndex = Math.ceil((this.pageIndex+1)/4);
    },
    go(index) {
      //跳转页面 第一页为0
      this.pageIndex = index;
      this.groupIndex = Math.ceil((this.pageIndex+1)/4);
      this.ellipsisEvent();
    },
    prev() {
      // if (this.pageIndex === 0) {
      //   return;
      // }
      // this.pageIndex -= 1;
      if (this.groupIndex === 1) {
        return;
      }
      this.groupIndex -= 1;
      this.quickJump("left")
      this.ellipsisEvent();
    },
    next() {
      // if (this.pageIndex >= this.pageCount - 1) {
      //   return;
      // }
      // this.pageIndex += 1;
      if (this.groupIndex >= Math.ceil(this.pageCount / 4)) {
        return;
      }
      this.groupIndex += 1;
      this.quickJump("right")
      this.ellipsisEvent();
    },
    goPage() {
      // 目标页大于最大页
      if (this.toPageIndex > this.pageCount) {
        this.alert(`超出最大页数`);
        this.toPageIndex = this.pageCount;
        return;
      } else {
        //定位当前页码
        this.groupIndex = Math.ceil(this.toPageIndex / 4);
      }
      if (
        !+this.toPageIndex ||
        this.toPageIndex < 0 || this.toPageIndex > this.pageCount
      ) {
        return;
      }
      this.pageIndex = this.toPageIndex - 1;
      this.ellipsisEvent();
    },
    resetPage() {
      this.pageIndex = 0;
      this.ellipsisEvent();
    }
  }
};
</script>
<style lang="scss">
/* 带页码的分页指令样式 */
.ui-page-count {
  text-align: right;
  padding-right: 0.2rem;
  font-size: 0.12rem;
  height: 0.43rem;
  line-height: 0.35rem;
  user-select: none;
  position: relative;
  padding-bottom: 0.1rem;
  margin-top: 0.3rem;
  & > a {
    color: rgba(100, 100, 140, 0.5);
    margin-right: 0.1rem;
    vertical-align: top;
    cursor: pointer;
    &.active {
      color: #fff;
      background-color: #378bd3;
      padding: 5px;
      border-radius: 4px;
    }

    &.right {
      margin-left: 0.1rem;
    }
  }

  & > .page-list {
    display: inline-block;
    vertical-align: top;

    & > div > li {
      display: inline-block;
      vertical-align: top;
      width: 0.33rem;
      height: 0.33rem;
      line-height: 0.33rem;
      text-align: center;
      border-radius: 50%;
      margin: 0 0.05rem;
      cursor: pointer;
      border: 1px #cccccc solid;

      &.left {
        background-image: url(../asset/tradesys/leftleft.png);
        background-repeat: no-repeat;
        background-position: center;
      }

      &.left:hover {
        background-image: url(../asset/tradesys/leftleft_hover.png);
        background-repeat: no-repeat;
        background-position: center;
      }

      &.right {
        background-image: url(../asset/tradesys/rightright.png);
        background-repeat: no-repeat;
        background-position: center;
      }

      &.right:hover {
        background-image: url(../asset/tradesys/rightright_hover.png);
        background-repeat: no-repeat;
        background-position: center;
      }
      &.active {
        background-color: rgb(55, 139, 211);
        color: #fff;
      }
    }
    & > li {
      display: inline-block;
      vertical-align: top;
      width: 0.33rem;
      height: 0.33rem;
      text-align: center;
      border-radius: 50%;
      margin: 0 0.05rem;
      cursor: pointer;

      &.active {
        background-color: rgb(55, 139, 211);
        color: #fff;
      }
    }
  }

  & > input {
    color: rgb(89, 89, 89);
    margin: 0 0.05rem;
    width: 0.4rem;
    border: 1px solid #ccc;
    height: 0.3rem;
    line-height: 0.3rem;
  }

  & > div {
    position: relative;
    text-align: left;
    display: inline-block;

    & > input {
      color: rgb(89, 89, 89);
      margin: 0 0.05rem;
      width: 0.6rem;
      border: 1px solid #ccc;
      height: 0.3rem;
      line-height: 0.3rem;
      padding-right: 0.1rem;
    }

    & > i {
      width: 0.67rem;
    }
  }

  & > button {
    width: 0.4rem;
    background-color: #15bdf4;
    color: #fff;
    margin-left: 0.05rem;
    border: 0;
    border-radius: 0.04rem;
    padding: 0.05rem 0;
    cursor: pointer;
  }
}
</style>