Pagination vue simple

pagination plugins for vue

Version: 1.1.1 Updated: 07/17/2019

By: shublog License: MIT

Downloads Last 30 Days: 181

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
Categories: Vue js