realtorEasier-webSite/mobile/src/components/Paging/index.vue

<template>
  <div class="layout">
    <a @click="clickHandle(index - 1)" ></a>
    <a @click="clickHandle(1)" :class="{active: index === 1}" >1</a><a class="more" @click="clickHandle(current - 3)" v-if="current>5" >...</a><a
      v-if="page!==maxPage && page!==1"
      v-for="page in pages"
      :key="page"
      @click="clickHandle(page)"
      :class="{active: index === page}"
      >{{page}}</a><a class="more" @click="clickHandle(pages[pages.length-1] + 2)" v-if="pages[pages.length-1]+2<=maxPage" >...</a><a @click="clickHandle(maxPage)" v-if="maxPage!==1" :class="{active: index === maxPage}" >{{maxPage}}</a>
      <i class="iconfont icon-youjiantou" @click="clickHandle(index + 1)" ></i>
  </div>
</template>

<script>
/**
 * 取得页码数组
 * @param showPageMaxCount 允许显示的页码最大数量
 * @param pageNow 当前页码
 * @param pageCount 总页数
 * @return 页码数组（整数数组）
 */
function getPageNumArr (showPageMaxCount, pageNow, pageCount) {
  let pageNumArr = []
  let pageNumBegin, pageNumEnd

  if (pageCount <= showPageMaxCount) {
    pageNumBegin = 1
    pageNumEnd = pageCount
  } else {
    if (pageNow <= Math.floor(showPageMaxCount / 2)) {
      pageNumBegin = 1
      pageNumEnd = showPageMaxCount
    } else if (pageCount - pageNow <= Math.floor(showPageMaxCount / 2)) {
      pageNumBegin = pageCount - showPageMaxCount
      pageNumEnd = pageCount
      pageNumEnd - pageNumBegin >= showPageMaxCount && pageNumBegin++
    } else {
      pageNumBegin = Math.ceil(pageNow - showPageMaxCount / 2)
      pageNumEnd = Math.floor(pageNow + showPageMaxCount / 2)
      pageNumEnd - pageNumBegin >= showPageMaxCount && pageNumBegin++
    }
  }
  for (let i = pageNumBegin; i <= pageNumEnd; i++) {
    pageNumArr.push(i)
  }

  return pageNumArr
}

export default {
  props: {
    current: {
      default: 1
    },
    reindex: {
      default: 1
    },
    total: {
      default: 10
    },
    equable: {
      default: 10
    },
    length: {
      default: 5
    },
    value: {
      default: 1
    },
    color: {
      default: '#2d2d2d'
    }
  },
  data () {
    return { index: this.value }
  },
  mounted () {
    this.$emit('maxPage', this.maxPage)
  },
  computed: {
    maxPage () {
      let val = Math.ceil(this.total / this.equable)
      this.$emit('maxPage', val)
      return val
    },
    pages () {
      let temp = getPageNumArr(this.length, this.index, this.maxPage)

      return temp
    }
  },
  methods: {
    clickHandle (index) {
      if (index > 0 && index <= this.maxPage) {
        this.index = index
      }
      this.$emit('clickHandle', this.index)
    }
  },
  watch: {
    index (newVal) {
      this.$bus.$emit('input', newVal)
    },
    current (newVal) {
      this.index = newVal
    }
  }
}
</script>

<style scoped>
    .layout .more:hover::after{
       transform: scaleX(0)!important;
    }
    .layout a:last-child:hover::before{
      transform: scaleX(2);
    }
    .layout a:last-child:hover::after{
      transform: translateX(5px);
    }
    .layout a:last-child::before{
      background-color: #111;
      height: 2px;
      width: 8px;
      transform-origin: 0 0;
    }
    .layout a:last-child::after{
      width: 0;
      height: 0;
      border-style: solid;
      border-width: 5px 0 5px 8px;
      border-color: transparent transparent transparent #011111;
    }

/* .layout {
  text-align: center;
}

.layout a {
  margin: 10px;
  font-size: 18px;
  display: inline-block;
  cursor: pointer;
  user-select: none;
  color: #2d2d2d;

}

.layout a.active,
.layout a:hover {
  color: #111111;
  border-bottom: 2px solid #111;
} */
</style>