基于vue.js+Boostrap3开发的分页组件vue-bs-pager

冷不防 2021-09-14 19:54 350阅读 0赞

# 前言 #

vue.js是2017年最火的前端框架了，笔者在年前抽出时间好好学习了一下，并结合自己积累的前端经验，写了一个简单的分页组件，笔者之前写过一个基于jQuery的分页插件，相比之下，使用vue.js开发要简单得多。

# 预览 #

![这里写图片描述][70]

# props #

<table> 
 <thead> 
  <tr> 
   <th align="left">名称</th> 
   <th align="right">默认值</th> 
   <th align="center">说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="left">total-count</td> 
   <td align="right">0</td> 
   <td align="center">数据总条数</td> 
  </tr> 
  <tr> 
   <td align="left">page-size</td> 
   <td align="right">10</td> 
   <td align="center">本页显示数量</td> 
  </tr> 
  <tr> 
   <td align="left">page-index</td> 
   <td align="right">0</td> 
   <td align="center">当前页数</td> 
  </tr> 
  <tr> 
   <td align="left">ext-class</td> 
   <td align="right"></td> 
   <td align="center">扩展样式 如：pagination-lg pagination-sm</td> 
  </tr> 
  <tr> 
   <td align="left">show-nearby</td> 
   <td align="right">3</td> 
   <td align="center">当前按钮前后按钮数</td> 
  </tr> 
  <tr> 
   <td align="left">info-template</td> 
   <td align="right"></td> 
   <td align="center">默认为 ‘总共 { {totalCount}} 项 每页显示 { {pageSize}} 项 当前 { {pageIndex}}/{ {totalPage}} 页’</td> 
  </tr> 
 </tbody> 
</table>

# 源码中文件说明 #

<table> 
 <thead> 
  <tr> 
   <th align="left">名称</th> 
   <th align="left">说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="left">vue-bs-pager.js</td> 
   <td align="left">分页组件源码</td> 
  </tr> 
  <tr> 
   <td align="left">vue-bs-pager.scss</td> 
   <td align="left">css源码</td> 
  </tr> 
  <tr> 
   <td align="left">index.html</td> 
   <td align="left">简单的使用组件的demo</td> 
  </tr> 
  <tr> 
   <td align="left">complexdemo.html</td> 
   <td align="left">复杂的使用组件的demo</td> 
  </tr> 
 </tbody> 
</table>

其他文件略

# 完整源码下载 #

[https://github.com/lhtzbj12/vue-bs-pager][https_github.com_lhtzbj12_vue-bs-pager]

[70]: /images/20210809/9413c7f82a0b4b4aa23d44001c99cbdd.png
[https_github.com_lhtzbj12_vue-bs-pager]: https://github.com/lhtzbj12/vue-bs-pager