使用vue自定义分页器

分页器是前端比较常用的一个组件，可以全局注册，并在其他组件中引用

• 
  <li class=“prev disabled” @click=“getPage(pageNo-1)” :disabled=‘pageNo==1’>
  «上一页
  
  <li :class=“{ active: pageNo == 1 }” v-show=“startAndEnd.start > 1” @click=“getPage(1)”>
  1
  
  <li :class=“{ active: pageNo == 2 }” v-show=“startAndEnd.start > 2” @click=“getPage(2)”>
  2
  

    <li class="dotted" v-show="startAndEnd.start > 3"><span>...</span></li>

    <!-- 中间部分 -->
    <li
      v-for="(p, index) in startAndEnd.end"
      :key="index"
      v-show="p >= startAndEnd.start"
      :class="{ active: pageNo == p }"
      @click="getPage(p)"
    >
      <a>{{ p }}</a>
    </li>

    <li class="dotted" v-show="startAndEnd.end < totalPage-1">
      <span>...</span>
    </li>
    <li :class="{ active: pageNo == startAndEnd.end }" @click="getPage(totalPage)" v-show="startAndEnd.end<totalPage">
      <a>{{ totalPage }}</a>
    </li>
    <li class="next" :disabled='pageNo==totalPage' @click="getPage(pageNo+1)">
      <a>下一页»</a>
    </li>
  </ul>
  <div>
    <span>共{{ totalPage }}页</span>
  </div>
</div>   </div> </template>