vue 分页组件

<template>
  <div class="page-number">
    <button @click="change('prev')" :class="{'button-disabled':leftDisabled}">上一页</button>
    <template v-if="totalPage<6">
      <button
        v-for="item in totalPage"
        :key="item"
        :class="{'active':item==page}"
        @click="change(item)"
      >{{item}}</button>
    </template>
    <template v-else>
      <template v-if="page<=5">
        <button
          v-for="item in 5"
          :key="item"
          :class="{'active':item==page}"
          @click="change(item)"
        >{{item}}</button>
        <button
          class="page-after"
          @click="change('after')"
          @mouseover="afterMouse('>>')"
          @mouseout="afterMouse('...')"
        >{{afterText}}</button>
        <button @click="change(totalPage)">{{totalPage}}</button>
      </template>
      <template v-else-if="page>5 && page<totalPage-4">
        <button @click="change(1)">1</button>
        <button
          class="page-before"
          @click="change('before')"
          @mouseover="beforeMouse('<<')"
          @mouseout="beforeMouse('...')"
        >{{beforeText}}</button>
        <button
          v-for="item in [page-2, page-1, page, page+1, page+2]"
          :key="item"
          :class="{'active':item==page}"
          @click="change(item)"
        >{{item}}</button>
        <button
          class="page-after"
          @click="change('after')"
          @mouseover="afterMouse('>>')"
          @mouseout="afterMouse('...')"
        >{{afterText}}</button>
        <button @click="change(totalPage)">{{totalPage}}</button>
      </template>
      <template v-else>
        <button @click="change(1)">1</button>
        <button
          class="page-before"
          @click="change('before')"
          @mouseover="beforeMouse('<<')"
          @mouseout="beforeMouse('...')"
        >{{beforeText}}</button>
        <button
          v-for="item in [totalPage-4, totalPage-3, totalPage-2, totalPage-1, totalPage]"
          :key="item"
          :class="{'active':item==page}"
          @click="change(item)"
        >{{item}}</button>
      </template>
    </template>
    <button @click="change('next')" :class="{'button-disabled':rightDisabled}">下一页</button>
  </div>
</template>

<script>
export default {
  name: "page",
  data() {
    return {
      afterText: "...",
      beforeText: "..."
    };
  },
  props: {
    page: {
      type: Number,
      default: 1,
    },
    totalPage: {
      type: Number,
      default: 1,
    },
  },
  computed: {
    leftDisabled() {
      return this.page == 1 ? true : false;
    },
    rightDisabled() {
      return this.page == this.totalPage ? true : false;
    },
  },
  methods: {
    change(pageStatus) {
      let currentPage = this.page;
      switch (pageStatus) {
        case "prev":
          pageStatus = currentPage > 1 ? currentPage - 1 : 1;
          break;
        case "next":
          pageStatus =
            currentPage < this.totalPage ? currentPage + 1 : this.totalPage;
          break;
        case "before":
          pageStatus = currentPage - 5;
          break;
        case "after":
          pageStatus = currentPage + 5;
          break;
        default:
          break;
      }
      if (pageStatus == currentPage) {
        return false;
      }
      this.$emit("callback", pageStatus);
    },
    afterMouse(data) {
      this.afterText = data;
    },
    beforeMouse(data) {
      this.beforeText = data;
    },
  },
};
</script>

<style scoped>
.page-number {
  display: inline-template;
  color: #666;
  font-size: 14px;
}

.page-number button {
  margin: 0 2px;
  padding: 0px 14px;
  line-height: 32px;
  border: 1px solid #ddd;
  box-sizing: border-box;
  text-align: center;
  transition: all 0.2s;
  cursor: pointer;
  outline: none;
  background: none;
  color: #666;
  vertical-align: middle;
}

.page-number button.active,
.page-number button.active:hover {
  background: #2d98e6;
  color: #fff;
  border-color: #2d98e6;
}

.page-number button:hover {
  background-color: #eee;
}

.page-number button.button-disabled {
  cursor: not-allowed;
  color: #ccc;
}

.page-number .page-after,
.page-before {
  position: relative;
  padding: 0px;
  width: 40px;
}
</style>

引用

<template>
   <vue-page :page="page" :totalPage="totalPage" @callback="callback"></vue-page>
</template>
<script>
import VuePage from "@/components/vue-page/page";
export default {
  name: "index",
  data() {
    return {
      page:5,
      totalPage:20
    };
  },
  components: { VuePage },
  methods:{
    callback(page){
      this.page=page;
      console.log(page)
    }
  }
};
</script>
<style scoped>
</style>