vue 单独封装分页组件

一、在components文件夹下新建 pagination.vue

<template>
  <div class="page-wrap">
    <ul>
      <li class="li-page" :plain="true" @click="goPrePage">&laquo;</li>
      <li v-for="(i, index) in showPageBtn" :key="index"
        :class="{active: i === currentPage, pointer: i, hover: i && i !== currentPage}" @click="pageOffset(i)">
        <a v-if="i">{{i}}</a>
        <a v-else>···</a>
      </li>
      <li class="li-page" :plain="true" @click="goNextPage">&raquo;</li>
    </ul>
  </div>
</template>

<script>
  export default {
    name: "pagination",
    props: {
      num: Number,
      limit: Number
    },
    data: () => ({
      offset: 0
    }),
    computed: {
      prePage() {
        return this.offset !== 0 && this.num;
      },
      nextPage() {
        return (this.offset + this.limit < this.num) && this.num
      },
      totalPage() {
        return Math.ceil(this.num / this.limit)
      },
      currentPage() {
        return Math.ceil(this.offset / this.limit) + 1
      },
      showPageBtn() {
        const pageNum = this.totalPage;
        const index = this.currentPage;
        if (pageNum <= 5) return [...new Array(pageNum)].map((v, i) => i + 1);
        if (index <= 2) return [1, 2, 3, 0, pageNum];
        if (index >= pageNum - 1) return [1, 0, pageNum - 2, pageNum - 1, pageNum];
        if (index === 3) return [1, 2, 3, 4, 0, pageNum];
        if (index === pageNum - 2) return [1, 0, pageNum - 3, pageNum - 2, pageNum - 1, pageNum];
        return [1, 0, index - 1, index, index + 1, 0, pageNum]
      }
    },
    methods: {
      pageOffset(i) {
        if (i === 0 || i === this.currentPage) return;
        this.offset = (i - 1) * this.limit;
        this.$emit('getNew', this.offset);
      },
      goPrePage() {
        if (!this.prePage) {
          // alert("这里是第一页呀，亲!");
          this.$message({
            showClose: true,
            message: '这是第一页哦！',
              type: 'warning'
            });
          return;
        }
        this.offset -= this.limit;
        this.$emit('getNew', this.offset);
      },
      goNextPage() {
        if (!this.nextPage) {
          // alert("已经是最后一页了呢~");
          this.$message({
            showClose: true,
            message: '这是最后一页啦！',
            type: 'warning'
          });
          return;
        }
        this.offset += this.limit;
        this.$emit('getNew', this.offset);
      }
    }
  }

</script>

<style scoped>
  .li-page {
    /* line-height: 25px; */
    cursor: pointer;
    color: #505362;
    background-color: #f4f4f5;
  }

  .active {
    border-color: #0C9F9A;
    background-color: #0C9F9A;
  }

  .pointer {
    cursor: pointer;
  }

  .hover {
    color: #FFF;
    background-color: #FFF;
  }

  .active a {
    color: #FFF;
  }

  .page-wrap {
    font-size: 14px;
    margin-top: 10px;
    text-align: center;
  }

  .page-wrap ul {
    display: inline-block;
    list-style: none;
    overflow: hidden;
    padding-inline-start: 0px;
  }

  .page-wrap li {
    float: left;
    color: #505362;
    padding: 10px 17px;
    margin: 0 5px;
    border-radius: 3px;
    user-select: none;
    border: 1px solid transparent;
  }

</style>

二、在需要分页的页面引入组件

<script>
import pagination from "../../components/pagination.vue"
export default {
    components: {
      pagination
    },
    data(){
        return {
            numpage: 0,
            limit: 10,
            currentList: [],
            list:[{
                name:'dsa',id:1
            },{
                name:'dsa',id:2
            },{
                name:'dsa',id:3
            },]
        }
    },

    mounted() {
      this.getNew(0);
      this.numpage = this.list.length;
    },
    methods:{
        // 分页
        getNew(value) {
            this.currentList = this.list.slice(value, value + this.limit);
        },

    }
}
</script>

三、将组件引入到页面使用

<div>
  <!-- 分页 -->
  <pagination :num="numpage" :limit="limit" @getNew="getNew"></pagination>
 </div>

好啦，一个分页组件就这么封装好啦！

/********
 *
 *                 .-~~~~~~~~~-._       _.-~~~~~~~~~-.
 *             __.'  欢迎访问     ~.   .~              `.__
 *           .'//     我的博客      \./   ☞ 送你小 ☜  \\`.
 *         .'//                     |                     \\`.
 *       .'// .-~"""""""~~~~-._     |     _,-~~~~"""""""~-. \\`.
 *     .'//.-"                 `-.  |  .-'                 "-.\\`.
 *   .'//______.============-..   \ | /   ..-============.______\\`.
 * .'______________________________\|/______________________________`.
 */