v-pager

v-pager is a flexible Vue.js pagination component. it give you various param to control pagination's interface.

Screen shots

Requirements

• vue.js ^1.0.0

Installation

NPM

npm install v-pager --save

Bower

bower install v-pager

Usage

ES6

import VPager from 'VPager'
 
export default {
  ...
  components: {
    VPager
  },
  ...
}

ES5

var Vue = require('vue')
var VPager = require('VPager')
 
var component = Vue.extend({
  ...
  components: {
    VPager: VPager
  }
  ...
});
 

Browser

<script src="/path/to/vue/vue.min.js"></script>
<script src="/path/to/v-pager.js"></script>

new Vue({
  ...
  components: {
    VPager: Vpager
  }
  ...
})

HTML structure

<v-pager :total-pages="10" :visiable-pages="4" page-click="function"></v-pager>

Props

Name	Type	isRequire	Default	Description
totalPages	Number	Yes		totalPages must greater than 0
visiablePages	Number	Yes		visiablePages must greater than 0
pageClick	Function	Yes		function have a param, eg: `function(clear) {}`, when user click page, page item will triggle loading, you can use `clear()` to remove loading
currentPage	Number	No	1	current page location
theme	String	No		Component provide two themes, 'default' and 'mini'
previousLabel	String	No	Previous	previous button label
nextLabel	String	No	Next	Next button label
defaultHideNextStepBtn	Boolean	No	false	if show previous button or next button, when current page equal 1 or total page
showOtherInfo	Boolean	No		show or hide page info (current page and total page)
showTools	Boolean	No		show or hide page tool (jump to target page)

License

Released under the MIT License.