vue仿element实现分页器效果

<div class="pagination" @click="pageClick">    <button class="pre">上一页</button>    <ul class="pages">      <li :class="['first', { 'active' : current == 1 }]" v-if="total">        1      </li>      <li :class="[ testLeft,goback]"        v-show="showPreMore"        @mouseenter="testLeft='more-left'"        @mouseleave="testLeft='more'"></li>      <li :class="['page-item', { 'active' : current == item }]" v-for="item in $pages">        {{ item }}      </li>      <li :class="[ testRight,gogo]"         v-show="showNextMore"        @mouseenter="testRight='more-right'"        @mouseleave="testRight='more'"></li>      <li :class="['last', { 'active' : current == $last }]" v-if="total">        {{ $last }}      </li>    </ul>    <button class="next">下一页</button>  </div>

computed:{    // 中间页数组    $pages(){      const foldPage = this.foldPage       const current = Number(this.current)      const halfFoldPage = Math.floor((foldPage-2)/2)       if (this.$last > foldPage){        if (current - halfFoldPage > 2){          this.showPreMore = true        }else {          this.showPreMore = false        }        if (current + halfFoldPage < this.$last){          this.showNextMore = true        }else {          this.showNextMore = false        }      }      let array = []      // folder1显示      if (this.showNextMore && !this.showPreMore){        for(let i = 2; i < foldPage; i++){          array.push(i)        }      // folder1 和 folder2都显示      }else if ( this.showPreMore && this.showNextMore ){        for(let i = current - halfFoldPage; i <= current + halfFoldPage; i++ ){          array.push(i)        }      // folder2显示      }else if (!this.showNextMore && this.showPreMore){        // 当folder2显示的时候,页码不能大于$last,需要往前多显示差额        let dis = current + halfFoldPage - this.$last + 1;        for(let i = current - halfFoldPage - dis ; i < this.$last; i++){          array.push(i)        }      // 都不显示      }else {        for(let i = 2; i < this.$last; i++){          array.push(i)        }      }      return array    },    // 总页数    $last(){                   return Math.ceil(this.total/this.size)    }  }

methods:{    pageClick(e){      let newPage = Number(e.target.textContent)      this.current = Number(this.current);      if (!isNaN(newPage) && newPage){        this.current = newPage      }else {        // 下一页        if (e.target.className.indexOf('next') != -1){          if (this.current == this.$last){            return;          }          this.current ++        }        // 上一页        else if (e.target.className.indexOf('pre') != -1){          if (this.current == 1){            return          }          this.current --        }        // 省略向左        else if (e.target.className.indexOf('left') != -1){          this.current -= this.foldPage - 2          if (this.current <= 1){            this.current = 1            return          }        }        // 省略向右        else if(e.target.className.indexOf('right') != -1){          this.current += this.foldPage - 2                    if (this.current >= this.$last){            this.current = this.$last            return           }        }      }    }  },