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',
  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',
  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',
  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)"