vue分页插件（已发布到npm上）

本来想着分页的插件并不难做，但是考虑到以后会应用到自己的项目上，考虑了挺多的，所以还是花了一天的时间。

我的分页插件一共分为三个层次

第一个层次 ： 页数小于等于5
呈现的状态: < 1 2 3 4 5 >
这个层次的逻辑最简单，仅仅是改变页码的样式就可以，逻辑很清晰

第二个层次： 页数大于5小于等于9
这个层次会根据页码的切换会呈现两种不同的状态
第一种状态： < 1 2 3 4 ··· 9 >
第二种状态 < 1 ··· 4 5 6 7 8 9 >

第三个层次: 页数大于9
这个层次会根据页码的切换呈现出三种状态
第一种状态： < 1 2 3 4 ··· n >
第二种状态： < 1 ··· 8 9 10 11 12 ··· n>
第三种状态： < 1 ··· n-3 n-2 n-1 n >

• cjhcjPaginate.vue 代码
  这个代码量还是比较多的，我也没办法做过多的讲解，索性就不讲了，看官们看不下去的话，直接拉倒最下边，我把我的带放到github上了。

<template>
  <div class="paginate" v-if="pageRange > 0">
      
    <div class="pages-container" :style="[pagesStyle]"  @click="prePage">
      <div class="pages">
        <i class="iconfont icon-left"></i>
      </div>
    </div>

    <!-- 从1到5的页码开始 -->
    <div
      class="pages-container"
      :style="[pagesStyle]"
      v-for="(item, index) in pages"
      :key="index * random()"
    >
      <div
        class="pages"
        @click="turnToPage(index)"
        :style="[index == choseActiveIndex ? activeStyle : '' ]"
      >{
  {index + 1}}</div>
    </div>
    <!-- 从1到5的页码结束 -->

    <!-- 从1到9的页码开始 -->
    <div
      class="pages-container"
      :style="[pagesStyle]"
      v-for="(item) in leftPages"
      :key="item  * random()"
    >
      <div
        class="pages"
        @click="turnToPage(item)"
        :style="[choseActiveIndex == item ? activeStyle : '']"
      >{
  {item + 1}}</div>
    </div>

    <div class="pages-container" :style="[pagesStyle]" v-if="pageRange > 5 && pageRange <=9">
      <div class="pages">
        <span style="font-weight: bold; ">···</span>
      </div>
    </div>

    <div
      class="pages-container"
      :style="[pagesStyle]"
      v-for="(item) in rightPages"
      :key="item * random()"
    >
      <div
        class="pages"
        @click="turnToPage(item)"
        :style="[choseActiveIndex == item ?