基于vue2.0的分页组件开发

时间：2022-06-10 21:47:19

今天安排的任务是写基于vue2.0的分页组件，好吧，我一开始是觉得超级简单的，但是越写越写不出来，写的最后乱七八糟的都不知道下句该写什么了，所以重新捋了思路，小结一下～

首先写组件需要考虑：

  1. 要从父组件传哪些必要的参数，即子组件需要提供什么接口
  2. 组件需要去实现哪些功能
  3. 我们要返回哪些参数给用户

针对这几点，做如下分析：

  1. 先上简单的模板： 
    <template lang="html">
    <div class="page">
        <ul>
            <li><a v-on:click="prevClick()">上一页</a></li>
            <li v-for="index in pages"  v-bind:class="{ active: curPage == index}">
                <a v-on:click="btnClick(index)">{{ index }}</a>
            </li>
            <li><a v-on:click="nextClick()">下一页</a></li>
            <li><a>共<i>{{totalPages}}</i>页</a></li>
        </ul>
    </div>
    </template>
  2. 将父组件传来的数据我们存放在props里，而且我们需要在data里写一个curPage来对应props里的cur，你肯定要问why!!因为vue2.0中要求不能改变props里的值的大小，但是我们这里的cur表示当前选中的页码值，是一个可变的值，那么我们就需要在created中将这两个值对应起来，后面后续就可以直接使用this.curPage了： 
    props: {
        dataNum: {
            type: Number
            , default: 100
        }
        , cur: {
            type: Number
            , default:1
        }

    , each: {
            type: Number
            , default: 10
        }
        , visiblepage: {
            type: Number
            , default: 10
        }

}
    , data: function(){
        return {
            curPage:0
        }
    }
    ,created: function(){
        this.curPage = this.cur;
    }
  3. 以上是我们已知的参数了，那么下面我们需要利用它们动态的去计算页码总数和具体要显示的页码：这部分我们放在computed中，具体神马原因移步vue文档啦～～ 
    computed: {
        totalPages: function(){
            return Math.ceil(this.dataNum / this.each) || 0
        }
        , pages: function(){
            var lowPage = 1;
            var highPage = this.totalPages;
            var pageArr = [];
            if(this.totalPages > this.visiblepage){
                var sub = Math.ceil(this.visiblepage/2);
                if(this.curPage > sub && this.curPage < this.totalPages - sub +1){
                    lowPage = this.curPage - sub;
                    highPage = this.curPage + sub - 2;
                }else if(this.curPage <= sub){
                    lowPage = 1;
                    highPage = this.visiblepage;
                }else{
                    lowPage = this.totalPages - this.visiblepage + 1;
                    highPage = this.totalPages;
                }
            }

        while(lowPage <= highPage){
                pageArr.push(lowPage);
                lowPage ++;
            }
            return pageArr;
        }
    }
  4. 下面添加我们用到的三个事件： 
    methods: {
         btnClick: function(index){
             this.curPage = index;
    this.$emit('change-page', index)
         }
         , nextClick: function() {
             if (this.curPage < this.totalPages) {
                 this.curPage++;
                 this.$emit('change-page', this.curPage)
             }
         }
         , prevClick: function() {
             if (this.curPage > 0) {
                 this.curPage--;
                 this.$emit('change-page', this.curPage)
             }
         }
    }
  5. 上面高亮显示的部分下面会重点来讲，结合三个黄色高亮部分，我们在父组件中要使用子组件的当前页码这个值来实现分页，因为vue2.0取消了$dispatch()，所以我们怎么能从子组件把数值传出来呢？这里2.0里用到了$emit()和v-on，所以这里可以看下vue2.0的文档，然后理解一下～我理解了半天才懂。。。脑子也是慢的没谁了。。。 
    <div id="app">
        <div class="content">
            <ul class="list">
    <li v-for="i in curList">{{ i }}</li>
            </ul>
        </div>
        <page :data-num="pagedata.length" :each="eachPageSize" :visiblepage="visiblepage" v-on:change-page="changePage"></page>
    </div>
     data: function(){
        return{
            cur: 0
            , dataNum: 0
            , eachPageSize: 3
            , visiblepage: 5

        , pagedata: [1, 2, 3, 4, 5, 6, 7, 8, 9]
            , curpage: 1
        }

}
    , computed: {
        curList: function () {
    var p = [];
            for(var i = 0,l= this.pagedata.length;i<l;i++){
                p[i] = this.pagedata[i];
            }
            return p.splice((this.curpage-1) * this.eachPageSize, this.eachPageSize);
        }
    }
    , methods: {
    changePage: function (cur) {
            this.curpage = cur
        }
    }
  6. 上面绿色的高亮主要是解决对象引用的问题，这个问题嘛要说起来可就说来话长了。。后面我也得再捋一捋这个部分。红色高亮呢就是动态显示每一页的内容。

以上呢就是所有核心代码啦，最后显示的效果就是如下：切换时候的效果你们就自己下去尝试吧～～我要下班了哈哈～代码提交给小哥，明天说不定又有新问题要给我。。先回家睡个好觉再说～大家加油～

基于vue2.0的分页组件开发

相关文章