@sanonz/vue-paginator

ReduxStoreProvider

Vue 简约分页插件，整个组件代码只有 100 多行，非常精简，此组建的诞生是有洁癖症患者的福音。

• 安装
• 手册
• 例子

安装

npm install @sanonz/vue-paginator --save

手册

<style>
.paginator-wrap{display:inline-block;margin-top:100px;}
.paginator-wrap a{cursor:pointer;color:#2cd6ff;user-select:none}
.paginator{list-style-type:none;padding:0;color:#333;line-height:100%;overflow:hidden;border:1px solid #e2e2e2;border-radius:4px;}
.paginator-item{float:left;border-right:1px solid #e2e2e2;}
.paginator-item:last-child{border-right:none;}
.paginator-active{background-color:#f3f3f3;}
.paginator-row{display:block;padding:6px 12px;}
</style>

<template>
  <div class="paginator-wrap">
    <paginator
      :range="2"
      :page="page"
      :size="20"
      :total="2000"
      prevText="Prev"
      nextText="Next"
      @change="onPageChange"
    />
  </div>
</template>

<script>
  import Paginator from '@sanonz/vue-paginator';


  export default {
    components: {
      Paginator,
    },
    data: function() {
      return {
        isMounted: false,
      };
    },
    mounted: function() {
      this.isMounted = true;
    },
    beforeDestroy: function() {
      this.isMounted = false;
    },
    methods: {
      onPageChange(page) {
        this.page = page;
      },
    },
  };
</script>

参数

Name	Type	Default	Required	Description
page	Number	null	true	当前页码，在路由中可以使用 this.$route.query.page 获取
size	Number	20	false	每页展示条数
total	Number	null	true	总条数
range	Number	2	false	当前页码左右两侧的页面展示个数
prevText	String	上一页	false	上一页显示文本
nextText	String	下一页	false	下一页显示文本

例子

https://sanonz.github.io/vue-paginator/examples/