利用vue实现的分页组件

男娘i 2022-05-18 04:52 304阅读 0赞

/*
    使用组件：
    <pagination></pagination>
    组件中传入的属性有：
    1、total ：一共有多少条数据：必选参数
    2、prepage :一页展示多少条  可选参数，默认值为2
    3、show-page ：显示的页码数有多少   可选参数，默认值为3
    4、v-model ：当前活动的页码是多少    必须参数且是动态参数哦，比如sPage
    
     */

效果：

![70][]

功能描述：

1、单击页码可跳转到相应的页面

2、可以在输入框中输入想要到达的页面（如果页面小于1，则跳转到第一页，如果比总页数大就跳转到最后一页）

3、单击前进和后退，可以实现前进和后退功能

4、当处在第一页时，后退按钮禁用，当处在最后一页时，前进按钮禁用

css代码：

vue组件：

Vue.component('pagination',{
            props:{
                total:{
                    type:Number
                },
                prepage:{
                    type:Number,
                    default:2
                },
                showPage:{//页面中要显示几个页码
                    type:Number,
                    default:3
                },
                value:{
                    type:Number
                }
            },
            data(){
                return {
                    pages:Math.ceil(this.total/this.prepage),//计算需要展示的总页数
                    val:'',//记录输入框中的值
                    currentPage:1,//记录当前页
                    posPage:Math.floor(this.showPage/2)+1,//超过这个页码时，固定显示的位置
                    start:1,//第一个页码的开始数字
                }
            },
            computed:{
                changeStart(){//分页逻辑
                    if(this.pages<=this.showPage){
                        return this.start = 1
                    }else{
                        if(this.currentPage<=this.posPage){
                            return this.start = 1
                        }else if(this.pages-this.currentPage<=this.posPage){
                            return  this.start = this.pages - this.showPage + 1
                        }else{
                            return  this.start = this.currentPage - this.posPage + 1
                        }
                    }
                }
            },
            methods:{
                changeShow(page){
                    this.currentPage = page
                    this.$emit('input',page)
    
                },
                jump(){
                    if(this.val<1){
                        this.val = 1
                    }
                    if(this.val>this.pages){
                        this.val = this.pages
                    }
                    this.val = Math.floor(this.val)
                    this.$emit('input',this.val)
                    this.currentPage = this.val
                    this.val = ''
                },
                prePageHandle(){
                    this.currentPage--
                    if(this.currentPage<1){
                        this.currentPage = 1
                    }
                    this.$emit('input',this.currentPage)
                },
                nextPageHandle(){
                    this.currentPage++
                    if(this.currentPage>this.pages){
                        this.currentPage = this.pages
                    }
                    this.$emit('input',this.currentPage)
    
                }
    
            },
            template:`
                   <div class="pagination">
            <span class="total">共 {
       {total}} 条 / {
       {pages}} 页</span>
    
            <span class="prev" :class="{'disabled':value==1}" @click="prePageHandle"><</span>
    
            <span class="page" v-for="page in showPage"
            :class="{'active':(changeStart + page-1)==value}"
            @click="changeShow(changeStart + page-1)"
            >{
       {changeStart + page-1}}</span>
    
            <span class="next" :class="{'disabled':value==pages}" @click="nextPageHandle">></span>
    
            <span class="jump">
                    前往
                    <input type="text" v-model="val" @keydown.enter="jump"/>
                    页
                </span>
        </div>
            `
        })

使用示例：简单版

<div class="box">  
      <pagination :total="20" :prepage="3" :show-page="3"  v-model="sPage"></pagination>
    </div>
    
    
    new  Vue({
    el:'.box',
    data:{
           sPage:1
       }
    
    })

页面效果：

![70 1][]

和分页数据结合版示例：单击对应的页码显示对应页码的数据

new Vue({
            el:'.box',
            data:{
                newList:[
                    ...`当你把一样东西和另外一样东西结合到一起的时候一定要利用当你把一样东西和另外一样东西结合到一起的时候一定要利用好两样东西的你对它的最精髓的理解然后去想它到底有什么相同之处和不同之处就是当你在选择一个行业的时候其实不光要想一想我为什么要做这个行业更重要的想这个行业为什么需要我如果你只能回答第一个问题而回答不了第二个问题的时候这条路你可能走到一半会很失败当你把一样东西和另外一样东西结合到一起的时候一定要利用好两样东西的你对它的最精髓的理解然后去想它到底有什么相同之处和不同之处就是当你在选择一个行业的时候其实不光要想一想我为什么要做这个行业更重要的想这个行业为什么需要我如果你只能回答第一个问题而回答不了第二个问题的时候这条路你可能走到一半会很失败当你把一样东西和另外一样东西结合到一起的时候一定要利用好两样东西的你对它的最精髓的理解然后去想它到底有什么相同之处和不同之处就是当你在选择一个行业的时候其实不光要想一想我为什么要做这个行业更重要的想这个行业为什么需要我如果你只能回答第一个问题而回答不了第二个问题的时候这条路你可能走到一半会很失败当你把一样东西和另外一样东西结合到一起的时候一定要利用好两样东西的你对它的最精髓的理解然后去想它到底有什么相同之处和不同之处就是当你在选择一个行业的时候其实不光要想一想我为什么要做这个行业更重要的想这个行业为什么需要我如果你只能回答第一个问题而回答不了第二个问题的时候这条路你可能走到一半会很失败当你把一样东西和另外一样东西结合到一起的时候一定要利用好两样东西的你对它的最精髓的理解然后去想它到底有什么相同之处和不同之处就是当你在选择一个行业的时候其实不光要想一想我为什么要做这个行业更重要的想这个行业为什么需要我如果你只能回答第一个问题而回答不了第二个问题的时候这条路你可能走到一半会很失败当你把一样东西和另外一样东西结合到一起的时候一定要利用好两样东西的你对它的最精髓的理解然后去想它到底有什么相同之处和不同之处就是当你在选择一个行业的时候其实不光要想一想我为什么要做这个行业更重要的想这个行业为什么需要我如果你只能回答第一个问题而回答不了第二个问题的时候这条路你可能走到一半会很失败当你把一样东西和另外一样东西结合到一起的时候一定要利用好两样东西的你对它的最精髓的理解然后去想它到底有什么相同之处和不同之处就是当你在选择一个行业的时候其实不光要想一想我为什么要做这个行业更重要的想这个行业为什么需要我如果你只能回答第一个问题而回答不了第二个问题的时候这条路你可能走到一半会很失败当你把一样东西和另外一样东西结合到一起的时候一定要利用好两样东西的你对它的最精髓的理解然后去想它到底有什么相同之处和不同之处就是当你在选择一个行业的时候其实不光要想一想我为什么要做这个行业更重要的想这个行业为什么需要我如果你只能回答第一个问题而回答不了第二个问题的时候这条路你可能走到一半会很失败当你把一样东西和另外一样东西结合到一起的时候一定要利用好两样东西的你对它的最精髓的理解然后去想它到底有什么相同之处和不同之处就是当你在选择一个行业的时候其实不光要想一想我为什么要做这个行业更重要的想这个行业为什么需要我如果你只能回答第一个问题而回答不了第二个问题的时候这条路你可能走到一半会很失败当你把一样东西和另外一样东西结合到一起的时候一定要利用好两样东西的你对它的最精髓的理解然后去想它到底有什么相同之处和不同之处就是当你在选择一个行业的时候其实不光要想一想我为什么要做这个行业更重要的想这个行业为什么需要我如果你只能回答第一个问题而回答不了第二个问题的时候这条路你可能走到一半会很失败当你把一样东西和另外一样东西结合到一起的时候一定要利用好两样东西的你对它的最精髓的理解然后去想它到底有什么相同之处和不同之处就是当你在选择一个行业的时候其实不光要想一想我为什么要做这个行业更重要的想这个行业为什么需要我如果你只能回答第一个问题而回答不了第二个问题的时候这条路你可能走到一半会很失败当你把一样东西和另外一样东西结合到一起的时候一定要利用好两样东西的你对它的最精髓的理解然后去想它到底有什么相同之处和不同之处就是当你在选择一个行业的时候其实不光要想一想我为什么要做这个行业更重要的想这个行业为什么需要我如果你只能回答第一个问题而回答不了第二个问题的时候这条路你可能走到一半会很失败当你把一样东西和另外一样东西结合到一起的时候一定要利用好两样东西的你对它的最精髓的理解然后去想它到底有什么相同之处和不同之处就是当你在选择一个行业的时候其实不光要想一想我为什么要做这个行业更重要的想这个行业为什么需要我如果你只能回答第一个问题而回答不了第二个问题的时候这条路你可能走到一半会很失败当你把一样东西和另外一样东西结合到一起的时候一定要利用好两样东西的你对它的最精髓的理解然后去想它到底有什么相同之处和不同之处就是当你在选择一个行业的时候其实不光要想一想我为什么要做这个行业更重要的想这个行业为什么需要我如果你只能回答第一个问题而回答不了第二个问题的时候这条路你可能走到一半会很失败好两样东西的你对它的最精髓的理解然后去想它到底有什么相同之处和不同之处就是当你在选择一个行业的时候其实不光要想一想我为什么要做这个行业更重要的想这个行业为什么需要我如果你只能回答第一个问题而回答不了第二个问题的时候这条路你可能走到一半会很失败。其实最简单销售是要在有原则的情况之下去变通这是一个好销售必须要做到的事情做公关的人从不强人所难我说一个公关人可能用一辈子的人品去挣分但却有可能因为一件小事而丢了一辈子挣的分`
                ],
                sPage:1,
                prepage:10
            },
            computed:{
                showList(){
                    let start = (this.sPage-1)*this.prepage
                    let end = start+this.prepage
                    // if(start<0){
                    //     start = 0
                    // }
                    start = Math.max(0,start);
                    end = Math.min(end,this.newList.length)
                    // if(end>this.newList.length){
                    //     end = this.newList.length
                    // }
                    return this.newList.slice(start,end)
                }
            }
        })

页面效果：

![70 2][]

ok，分享完毕，有什么疑问或好的建议，欢迎提问哦

[70]: /images/20220518/67305805e317436aa054490c7d042ea6.png
[70 1]: /images/20220518/8888a4597a494d818b0897c45c37ccfa.png
[70 2]: /images/20220518/98f4d6b142754bbca4720ce1e109fb43.png