vue-handy-pagination

A Vue.js pagination component.
Providing simple API, to customize pages, color and other styles very easily.

View Demo
Try Demo on Codepen

Installation

NPM

Install the npm package.

npm install vue-handy-pagination --save

Import the component.

import Vue from 'vue'
import Pagination from 'vue-handy-pagination'
Vue.use(Pagination)

CDN

Use the source file in browser.

<script src="https://unpkg.com/vue-handy-pagination@latest/dist/pagination.js"></script>

Usage

Basic Usage

<pagination 
  totalPages="28"
  initialPage="1">
</pagination>

Example

Bind a variable.

<template>
  <pagination 
    :totalPages="totalPages"
    :initialPage="initialPage">
  </pagination>
</template>

<script>
export default {
  name: 'App',
  components: { Pagination },
  data () {
    return {
      totalPages: 28,
      initialPage: 10
    }
  }
</script>

Bind different variables, to customize color or other styles. Please reference the props below.

<template>
  <pagination 
    :totalPages="totalPages"
    :color="color"
    :background="background"
    :weight="weight">
  </pagination>
</template>

<script>
export default {
  name: 'App',
  components: { Pagination },
  data () {
    return {
      totalPages: 28,
      color: '#cca8bb',
      background: '#fffafa',
      weight: 'light'
    }
  }
</script>

Custom Event

Listen for a custom event @changePage when page get changed.

<template>
  <pagination 
    :totalPages="totalPages"
    @changePage="getCurrentPage(page)">
  </pagination>
</template>

<script>
export default {
  name: 'App',
  components: { Pagination },
  data () {
    return {
      totalPages: 28,
    }
  },
  methods: {
    getCurrentPage(page) {
      console.log(page)
    }
  }
</script>

Props

Name	Description	Default	Type
`totalPages`	Total count of pages.	20	`Number`
`initialPage`	Set a default page.	1	`Number`
`pre`	Set text for button Prev.	'Prev'	`String`
`next`	Set text for button Next.	'Next'	`String`
`color`	Customize theme color, which will set the font color and the border color.	'#2C3E50'	`String`
`background`	Customize background color.	'#FFFFFF'	`String`
`weight`	Pagination style. Providing two kinds of style: normal or light.	normal	`String`
`ellipsis`	Set text for the break view indicator.	'···'	`String`
`font`	Set a font-family.	'Avenir'	`String`

Events

Event	Description	Example
changePage	This event will be triggered whenever page get changed. The callback receives the current page number as an argument.	`@changePage="getCurrentPage(page)"`

chelseachel/vue-handy-pagination