android-cloud-H5/pages/activity/invite-user/components/InvitePagination.vue

<template>
  <div class="pagination-wrap">
    <div class="left" @click="pageChangeHandle('left')">
      <van-icon name="arrow-double-left" :color="isDisabled('left')" />
    </div>
    <div class="page-num">{{ currentPage }}/{{ pageCount }}</div>
    <div class="right"  @click="pageChangeHandle('right')">
      <van-icon name="arrow-double-right" :color="isDisabled('right')"/>
    </div>
  </div>
</template>

<script>
export default {
  name: 'InvitePagination',
  props: {
    total: {
      type: Number,
      default: 0
    },
    pageSize: {
      type: Number,
      default: 5
    },
    currentPage: {
      type: Number,
      default: 1
    },
  },
  computed: {
    isDisabled(type) {
      return ()=>{
        let color = '#979797';
        if (type === 'left' && this.currentPage === 1) {
          color = '#bbb';
        }
        if (type === 'right' && this.currentPage === this.pageCount) {
          color = '#bbb';
        }
        return color;
      };
    },
    pageCount() {
      return Math.ceil(this.total / this.pageSize);
    }
  },
  methods: {
    pageChangeHandle(type) {
      if (type === 'left' && this.currentPage > 1) {
        this.$emit('onPageChange', this.currentPage - 1);
      }
      if (type === 'right' && this.currentPage < this.pageCount) {
        this.$emit('onPageChange', this.currentPage + 1);
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.van-icon-arrow-double-left::before {
  content: "\e668";
}
.van-icon-arrow-double-right::before {
  content: "\e660";
}
.pagination-wrap{
  line-height: 26px;
  display: flex;
  flex-wrap: nowrap;
  justify-content: flex-end;
  align-items: center;

  .left,.right{
    width: 17.5px;
    height: 26px;
    font-size: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

 .page-num{
  text-align: center;
    font-size: 12px;
    width: 45px;
    font-weight: 400;
    font-size: 12px;
    color: #333;
 }
}
</style>