vue-easy-pagination v0.0.1

vue.pagination

Pagination for Vue.js

install

npm install vue-easy-pagination

初始化插件

import Vue from 'vue'
import VuePagination from 'VuePagination'

Vue.use(VuePagination)

使用

1、基本使用

HTML Template

<vue-pagination 
  :totle-num="totleNum"
  :current-page="currentPage">
</vue-pagination>

javascript

export default {
  name: 'App',
  data () {
    return {
      totleNum:100,
      currentPage:3
    }
  }
}

2、自定义page-sizes和设置初始page-size

自定义page-sizes30,40,50，设置当前page-size为40（默认pagesizes为10,50,100，pagesize为10）

HTML Template

<vue-pagination 
  :totle-num="totleNum"
  :current-page="currentPage"
  :page-sizes="pageSizes"
  :page-size="40">
</vue-pagination>

javascript

export default {
  name: 'App',
  data () {
    return {
        totleNum:100,
    	currentPage:3,
      	pageSizes:[30,40,50],
    }
  }
}

3、on-change回调函数

pageSize和currentPage改变时调用on-change,返回的参数为currentPage和pageSize（如果是pageSize的改变，currentPage自动跳转到第一页）

HTML Template

<vue-pagination 
  :totle-num="totleNum"
  :current-page="currentPage"
  :page-sizes="pageSizes"
  :on-change="onChange">
</vue-pagination>

javascript

export default {
  name: 'App',
  data () {
    return {
    	totleNum:100,
    	currentPage:3,
      	pageSizes:[30,40,50],
    }
  },
  methods:{
    onChange(page,size){
      console.log(page,size);
    },
  }
}

4、on-page-size-change 和 on-current-page-change回调函数

pageSize改变时调用on-page-size-change，currentPage改变时调用on-current-page-change，回掉参数为currentPage和pageSize（如果是存在on-change参数时，返回的currentPage始终为1，所以建议不要和on-change同时使用）

HTML Template

<vue-pagination 
  :totle-num="totleNum"
  :current-page="currentPage"
  :page-sizes="pageSizes"
  @on-page-size-change="onPageSizeChange"
  @on-current-page-change="onCurrentPageChange">
</vue-pagination>

javascript

export default {
  name: 'App',
  data () {
    return {
    	totleNum:100,
    	currentPage:3,
      	pageSizes:[30,40,50],
    }
  },
  methods:{
    onPageSizeChange(page,size){
      console.log(page,size);
    },
    onCurrentPageChange(page,size){
      console.log(page,size);
    }
  }
}