【VUE】实现分页组件

简介: 【VUE】实现分页组件

HTML代码

<template>
      <div class="paging" v-if="count">
        <ul>
            <li class="pre" v-show="page > 1" @click="jian()">
                <span>上一页</span>
            </li>
            <li v-for="(item,index) in pageall" :key="index" 
            :class="{'active': page === item, 'ellipsis': item === '...'}" 
            @click="res_page(item)">
            {{item}}</li>
            <li class="next" v-show="page < totalPages" @click="jia()">
                <span>下一页</span>
            </li>
        </ul>
        <span class="sum">共 {{totalPages}} 页, 跳至</span>
        <input type="text" @keyup.enter="activePage($event)">
        <span>页</span>
    </div>
</template>

🧩组件的一些规定和条件

我们可以把这个分页组件分为三种形态

  • 第一种 总页数 <=5 的
    我们规定当总页数小于5时, 展示出所有的页码

  • 第二种 当前页为第一页或最后一页的
    当页码为第一页或者最后一页时, 选择性的消失 上一页 或 下一页 按钮
  • 第三种 以上两种都不是的

首先这个分页组件需要得知三个条件

count(数据总数), page(当前页数), page_size(每页展示的数量)

prop:['count','page','page_size']

注意: 由于子组件不能直接改变父组件的值, 所以在引用该分页组件的父组件中,

可以写入 :changePage.sync=“page”,

每当page改变时 采用this.$emit(“changePage”, value) 传入value来改变page

📕创建分页数组

Vue计算属性中得出总页数totalPages

totalPages(){
  return Math.ceil(this.count / this.paeg_size)
}

在Vue计算属性中得出两个值, beforePagesafterPages 代表最小值最大值(第一页与最后一页除外)

beforePages(){
  return this.page -2
}
afterPages(){   
    return this.page + 2
},

我们规定总是显示当前页的前两页和后两页.

重点来了, 在Vue属性中创建分页数组

  • 添加第一页和最后一页
  • 首先我们规定的beforePage=page-2, 当beforepage > 1 时, 即page > (1+2) , 这个时候就需要添加第一页 .
    最后一页同理
  • 什么时候添加省略呢?
  • 我们还规定当totalPage总页数小于等于5页时,展示所有页码 ,
  • 当totalPage > 5,并且beforePage=page-2>=3或者afterPage=page+2<=totalPage-2时添加省略.
    当totalPage < 5,如图所示:

我们需要把前省略替换成2 后省略替换成4

pageall(){
    let arr=[]
    for(let everyPages = this.beforePages; everyPages <= this.afterPages; everyPages++) {
        if(everyPages > this.totalPages) {
            continue;
        }
        if(everyPages <= 0){
            continue;
        }
       arr.push(everyPages)
    }
    // 添加第一页
    if(this.page > 3 {
        arr.unshift(1)
    }
    // 添加最后一页
    if(this.page < this.totalPages-2) {
        arr.push(this.totalPages)
    }
    //添加前省略
    if(this.page >= 5) {
      if(this.totalPages > 5) {
        arr.splice(1,0,'...')
      }else{
        arr.splice(1,0,2)
      }
    }
    //添加后省略
    if(this.page <= this.totalPages-4) {
      if(this.totalPages > 5) {
        arr.splice(arr.length-1,0,"...")
      }else{
        arr.splice(arr.length-1,0,4)
      }
   }
    return arr
}

📒切换页码

现在数组已经完成, 还需要添加上点击切换页码的方法.

点击下一页👇🏻

jia(){
  this.$emit('update:changepage',  this.page + 1)
}

点击上一页👆🏻

jian(){
  this.$emit('update:changepage',  this.page - 1)
}

点击任意一页

res_page(value){
  if(value!=="..."){
    this.$emit('update:changepage',  value)
  }V
}

在输入框内输入页码,按Enter键跳转

activePage(e){
    if(e.target.value > this.totalPages) {
        this.$emit('update:changepage', this.totalPages)
    }else if(e.target.value <= 0) {
        this.$emit('update:changepage', 1)
    }else{
        this.$emit('update:changepage', e.target.value - 0)
    }
    e.target.value = ""
    e.target.blur()
}

📖CSS

最后附上CSS代码

.paging {
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #657180;
            ul {
                padding: 5px;
                display: inline-flex;
                background-color: #FFF;
                li {
                    width: 40px;
                    height: 40px;
                    margin: 0 2px;
                    border-radius:5px;
                    border: 1px solid #d7dde4;
                    list-style: none;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    caret-color: transparent;
                    cursor:pointer;
                }
                li:first-child{
                    width: 80px;
                    border-radius: 40px 0 0 40px;
                    span {
                        color: #000000;
                    }
                }
                li:last-child{
                    width: 80px;
                    border-radius: 0 40px 40px 0;
                    span {
                        color: #000000;
                    }
                }
                li:hover {
                    color: #00a1d6;
                    transition: all 0.5s;
                    border-color: #00a1d6;
                }
                .ellipsis {
                    border: none;
                }
                .ellipsis:hover {
                    color: #657180;
                }
                .active{
                    background-color: #00a1d6;
                    color: #FFF;
                }
            }
            .sum {
                margin-left: 30px;
            }
            span{
                font-size: 13px;
                color: #99a2aa;
            }
            input {
                height: 30px;
                width: 60px;
                border-radius: 5px;
                border: 1px solid #d7dde4;
                margin: 0 10px;
                outline: none;
            }
        }


相关文章
|
17天前
|
缓存 JavaScript 前端开发
vue学习第四章
欢迎来到我的博客!我是瑞雨溪,一名热爱JavaScript与Vue的大一学生。本文介绍了Vue中计算属性的基本与复杂使用、setter/getter、与methods的对比及与侦听器的总结。如果你觉得有用,请关注我,将持续更新更多优质内容!🎉🎉🎉
33 1
vue学习第四章
|
17天前
|
JavaScript 前端开发
vue学习第九章(v-model)
欢迎来到我的博客,我是瑞雨溪,一名热爱JavaScript与Vue的大一学生,自学前端2年半,正向全栈进发。此篇介绍v-model在不同表单元素中的应用及修饰符的使用,希望能对你有所帮助。关注我,持续更新中!🎉🎉🎉
27 1
vue学习第九章(v-model)
|
17天前
|
JavaScript 前端开发 开发者
vue学习第十章(组件开发)
欢迎来到瑞雨溪的博客,一名热爱JavaScript与Vue的大一学生。本文深入讲解Vue组件的基本使用、全局与局部组件、父子组件通信及数据传递等内容,适合前端开发者学习参考。持续更新中,期待您的关注!🎉🎉🎉
32 1
vue学习第十章(组件开发)
|
11天前
|
前端开发 JavaScript 测试技术
Vue3中v-model在处理自定义组件双向数据绑定时,如何避免循环引用?
Web 组件化是一种有效的开发方法,可以提高项目的质量、效率和可维护性。在实际项目中,要结合项目的具体情况,合理应用 Web 组件化的理念和技术,实现项目的成功实施和交付。通过不断地探索和实践,将 Web 组件化的优势充分发挥出来,为前端开发领域的发展做出贡献。
22 8
|
11天前
|
JavaScript
在 Vue 3 中,如何使用 v-model 来处理自定义组件的双向数据绑定?
需要注意的是,在实际开发中,根据具体的业务需求和组件设计,可能需要对上述步骤进行适当的调整和优化,以确保双向数据绑定的正确性和稳定性。同时,深入理解 Vue 3 的响应式机制和组件通信原理,将有助于更好地运用 `v-model` 实现自定义组件的双向数据绑定。
|
22天前
|
JavaScript 前端开发 UED
vue学习第二章
欢迎来到我的博客!我是一名自学了2年半前端的大一学生,熟悉JavaScript与Vue,目前正在向全栈方向发展。如果你从我的博客中有所收获,欢迎关注我,我将持续更新更多优质文章。你的支持是我最大的动力!🎉🎉🎉
30 3
|
23天前
|
JavaScript 前端开发
如何在 Vue 项目中配置 Tree Shaking?
通过以上针对 Webpack 或 Rollup 的配置方法,就可以在 Vue 项目中有效地启用 Tree Shaking,从而优化项目的打包体积,提高项目的性能和加载速度。在实际配置过程中,需要根据项目的具体情况和需求,对配置进行适当的调整和优化。
|
23天前
|
存储 缓存 JavaScript
在 Vue 中使用 computed 和 watch 时,性能问题探讨
本文探讨了在 Vue.js 中使用 computed 计算属性和 watch 监听器时可能遇到的性能问题,并提供了优化建议,帮助开发者提高应用性能。
|
23天前
|
存储 缓存 JavaScript
如何在大型 Vue 应用中有效地管理计算属性和侦听器
在大型 Vue 应用中,合理管理计算属性和侦听器是优化性能和维护性的关键。本文介绍了如何通过模块化、状态管理和避免冗余计算等方法,有效提升应用的响应性和可维护性。
|
23天前
|
存储 缓存 JavaScript
Vue 中 computed 和 watch 的差异
Vue 中的 `computed` 和 `watch` 都用于处理数据变化,但使用场景不同。`computed` 用于计算属性,依赖于其他数据自动更新;`watch` 用于监听数据变化,执行异步或复杂操作。