vue分页组件封装

最新推荐文章于 2024-06-25 14:51:49 发布

故心v

最新推荐文章于 2024-06-25 14:51:49 发布

阅读量347

点赞数 1

分类专栏： vue 文章标签： vue 分页分页封装

本文链接：https://blog.csdn.net/qq_41555854/article/details/111205084

版权

vue 专栏收录该内容

27 篇文章 1 订阅

订阅专栏

本文介绍了如何在Vue.js中封装一个分页组件，包括使用父传子通信的方式通过$emit发射事件更新父组件状态，以及使用sync修饰符直接操作父组件的属性，实现页面切换时的双向数据绑定。详细展示了组件的模板、数据、计算属性和方法，以及在父组件中的监听和调用API的例子。

摘要由CSDN通过智能技术生成

vue分页组件封装

座右铭：越努力越幸运，越运动越健康。
热爱前端技术，热爱运动的（爱笑，傻傻的）这样一个人

用父传子进行封装（发射）

//封装
<template>
  <nav aria-label="Page navigation" style="text-align: center;">
    <ul class="pagination">
      <!-- 上一页 -->
      <li @click="prePage()" :class="pageNo<=1?'disabled':''">
        <a aria-label="Previous">
          <span aria-hidden="true">&laquo;</span>
        </a>
      </li>
      <!-- 遍历总页数 -->
      <li
        :class="pageNo == index ?'active':''"
        v-for="index in pages"
        :key="index"
        @click="curPage(index)"
      >
        <a>{{index}}</a>
      </li>
      <!-- 下一页 -->
      <li @click="nextPage()" :class="pageNo>=pageTotal?'disabled':''">
        <a aria-label="Next">
          <span aria-hidden="true">&raquo;</span>
        </a>
      </li>
    </ul>
  </nav>
</template>

<script>
export default {
  data() {
    return {
      curNo: 1
    };
  },
  props: ["pageTotal", "pageNo"], //父-子 pageTotal总页数  pageNo当前页
  created() {
    this.curNo = this.pageNo;  //为了避免一些错误，不让子来操作当前页
  },
  computed: {  //对页码的要求
    pages() {
      let s = this.pageNo;
      let n = this.pageTotal;
      if (n < 10) return n; //总页数小于10，不添加...
      if (s <= 5) {
        return [1, 2, 3, 4, 5, 6, 7, "...", n];
      } else if (s >= n - 5) {
        //页码大于总页数-5
        return [1, "...", n - 6, n - 5, n - 4, n - 3, n - 2, n - 1, n];
      } else {
        return [1, "...", s - 2, s - 1, s, s + 1, s + 2, "...", n];
      }
    }
  },
  methods: {
    //当前页
    curPage(i) {
       if (i == "...") return;
      this.$emit('e-child',i);
      // if (i == "...") return;
      // this.$emit("update:pageNo", i);
    },
    //上一页
    prePage() {
      if (this.pageNo > 1) {
        this.$emit('e-child',--this.curNo );
        // this.$emit("update:pageNo", --this.curNo);
      }
    },
    //下一页
    nextPage() {
      if (this.pageNo < this.pageTotal) {
        this.$emit('e-child',++this.curNo );
        // this.$emit("update:pageNo", ++this.curNo);
      }
    }
  }
};
//调用api
//例如：<Pagination  :pageTotal = "page.pageTotal"  :pageNo="page.pageNo" @e-child="getLists" />
/*需要传递的参数
*1.pageTotal  总页数
*2.pageNo  当前页
*3.接收发射过来的参数：getLists ，getLists为发送请求分页的方法
*/ 
</script>

在这里插入图片描述

使用sync修饰符（直接操作符，不用发射）

<template>
  <nav aria-label="Page navigation" style="text-align: center;">
    <ul class="pagination">
      <!-- 上一页 -->
      <li @click="prePage()" :class="pageNo<=1?'disabled':''">
        <a aria-label="Previous">
          <span aria-hidden="true">&laquo;</span>
        </a>
      </li>
      <!-- 遍历总页数 -->
      <li
        :class="pageNo == index ?'active':''"
        v-for="index in pages"
        :key="index"
        @click="curPage(index)"
      >
        <a>{{index}}</a>
      </li>
      <!-- 下一页 -->
      <li @click="nextPage()" :class="pageNo>=pageTotal?'disabled':''">
        <a aria-label="Next">
          <span aria-hidden="true">&raquo;</span>
        </a>
      </li>
    </ul>
  </nav>
</template>

<script>
export default {
  data() {
    return {
      curNo: 1
    };
  },
  props: ["pageTotal", "pageNo"], //父-子 pageTotal总页数  pageNo当前页
  created() {
    this.curNo = this.pageNo;  //为了避免一些错误，不让子来操作当前页
  },
  computed: {  //对页码的要求
    pages() {
      let s = this.pageNo;
      let n = this.pageTotal;
      if (n < 10) return n; //总页数小于10，不添加...
      if (s <= 5) {
        return [1, 2, 3, 4, 5, 6, 7, "...", n];
      } else if (s >= n - 5) {
        //页码大于总页数-5
        return [1, "...", n - 6, n - 5, n - 4, n - 3, n - 2, n - 1, n];
      } else {
        return [1, "...", s - 2, s - 1, s, s + 1, s + 2, "...", n];
      }
    }
  },
  methods: {
    //当前页
    curPage(i) {
      //  if (i == "...") return;
      // this.$emit('e-child',i);
      if (i == "...") return;
      this.$emit("update:pageNo", i);
    },
    //上一页
    prePage() {
      if (this.pageNo > 1) {
        // this.$emit('e-child',--this.curNo );
        this.$emit("update:pageNo", --this.curNo);
      }
    },
    //下一页
    nextPage() {
      if (this.pageNo < this.pageTotal) {
        // this.$emit('e-child',++this.curNo );
        this.$emit("update:pageNo", ++this.curNo);
      }
    }
  }
};
//注意！！！！！！！父组件中监听
//使用sync修饰符封装还需要监听当前页的变化，需要新的当前页才发生变化
watch:{  //监听pageNo
    'page.pageNo'(newValue,oldValue){
    //getLists为发送请求分页的方法
      this.getLists(newValue);
    }
  },
</script>
//调用api
//例如：<Pagination  :pageTotal = "page.pageTotal"  :pageNo.sync="page.pageNo" /> 
/*需要传递的参数
*1.pageTotal  总页数
*2.pageNo  当前页 使用sync修饰符
*/