vue分页组件封装

刺骨的言语ヽ痛彻心扉 2022-12-28 07:17 154阅读 0赞

# vue分页组件封装 #

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

--------------------

### 文章目录 ###

*  vue分页组件封装
 *  用父传子进行封装（发射）
 *  使用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">«</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">»</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>

![在这里插入图片描述][20201215134634597.png]  
![在这里插入图片描述][20201215134649813.png]  
![在这里插入图片描述][20201215134700240.png]

# 使用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">«</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">»</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修饰符 */

![在这里插入图片描述][20201215134634597.png]  
![在这里插入图片描述][20201215134649813.png]  
![在这里插入图片描述][20201215134700240.png]

[20201215134634597.png]: /images/20221120/e07fca8031644bf0ac160010bf4e7705.png
[20201215134649813.png]: /images/20221120/91c2f151613743ab9a3846b2ef59b42d.png
[20201215134700240.png]: https://img-blog.csdnimg.cn/20201215134700240.png