pagination-vue-simple

一个简单的原生自定义vue分页插件。

1.1.0 版本更新说明：

1.新增自定义页码被激活颜色theme-color的功能，并兼容ie9及其以上 2.对属性说明部分参数写法进行修正，使其与完整示例里的写法一致 3.新增效果图展示

安装

npm install pagination-vue-simple --save

初始化 在main.js中全局引入

import Vue from 'vue'
import PaginationVueSimple from 'pagination-vue-simple'

Vue.use(PaginationVueSimple)

最简示例

<template>
  <div id="app">
    <pagination-vue-simple 
        :total="80" 
        @current-change-page="getPage">
    </pagination-vue-simple>
  </div>
</template>

<script>
export default {
  name: 'app',
  data(){
    return {
      page: 1
    }
  },
  methods:{
    getPage(page){
      this.page = page
    }
  }
}
</script>

完整示例

<template>
  <div id="app">
    <pagination-vue-simple 
        :type="'sm'" 
        :total="80" 
        :limit="10" 
        :max-show="5" 
        :is-show-total-page="false" 
        :p-position="'left'"
        :theme-color="'green'"
        @current-change-page="getPage">
    </pagination-vue-simple>
  </div>
</template>

<script>
export default {
  name: 'app',
  data(){
    return {
      page: 1
    }
  },
  methods:{
    getPage(page){
      this.page = page
    }
  }
}
</script>

属性

| 参数 | 说明 | 类型 | 可选值 | 默认值 | | ------------ | -------------------------------- | ------- | ---------------------- | ---------------------- | | total | 数据总条数 | Number | | | | limit | 每页数据条数 | Number | | 10 | | max-show | 最多显示页码数 | Number | | 5 | | type | 页码样式大小类型 | String | normal/sm/lg | normal | | is-show-total-page| 是否显示总页码 | Boolean | true/false | false | | theme-color | 主题颜色，被选中时的颜色 | String | | #36af6c | | p-position | 页面放置位置 | String | left/center/right | left |

事件

| 事件名称 | 说明 | 回调参数 | | -------------- | ----------------- | --------------- | | current-change-page | 切换页码时会触发 | 当前页 page |