d-page

A Vue component for pagination

Usage no npm install needed!

<script type="module">
  import dPage from 'https://cdn.skypack.dev/d-page';
</script>

README

# D-Page A Vue component for pagination

演示地址

http://component.davidwong.cn/d-page

快速上手

  • 安装
  npm install d-page --save
  • 导入
      import Vue form 'vue'
  import DPage from 'd-page'
  component : {
      DPage
  }
  • 在组件中使用
      <DPage
      :page-index="pageIndex"
      :total-count="count"
      :page-size="pageSize"
      :visable-num="visableNum"
      @change="pageChange"></DPage>
  • 参数说明
      > page-index --- 当前页
  > total-count --- 总数量，用于搭配pagesize计算总页数
  > page-size --- 页面显示多少项
  > visable-num --- 可见页码数量，必须为奇数，不是奇数默认+1，最少和默认是5，因为小于5的分页体验都不是很好
  > @change --- 页码变化之后执行的事件，参数是当前页page-index

更新

分页有问题，首尾页不正常显示，解决了