Vue-paginators NPM

vue-paginators

a pagination component for vue.js

Installation

Using npm

npm install vue-paginators --save 
# or
cnpm install vue-paginators --save

Usage

// In main.js
import Vue from 'vue'
import vuePaginators from "vue-paginators"
Vue.use(vuePaginators)

<pagination :totalPages="total" @jump="jumpTo"></pagination>

export default {
  data(){
    return {
      total: 14  // get this from ajax data
    }
  },
  methods: {
    jumpTo(curr){
      // do something when you click the pagination bar ...
    }
  }
}

Properties

属性	类型	可选值	是否必需
showItem	Number	5 (默认)	否
totalPages	Number	无 (默认)	是
first	String	首页 (默认)	否
prev	String	上一页 (默认)	否
next	String	下一页 (默认)	否
last	String	末页 (默认)	否
pageStyle	String	default (默认) boot (bootstrap风格)	否
skin	String(任意css颜色值)	#0E90D2 (默认)	否

Events

@jump

点击分页时触发句柄

<pagination :totalPages="total" :showItem="5" @jump="jumpTo"></pagination>

export default {
  data(){
    return {
      total: 14
    }
  },
  methods : {
    jumpTo(curr){
      // do something when you click the pagination bar ...
    }
  }
}