基於vue2.0的分頁組件開發

今天安排的任務是寫基於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. 上面綠色的高亮主要是解決對象引用的問題，這個問題嘛要說起來可就說來話長了。。后面我也得再捋一捋這個部分。紅色高亮呢就是動態顯示每一頁的內容。

以上呢就是所有核心代碼啦，最后顯示的效果就是如下：切換時候的效果你們就自己下去嘗試吧～～我要下班了哈哈～代碼提交給小哥，明天說不定又有新問題要給我。。先回家睡個好覺再說～大家加油～