vue-handy-pagination v0.1.10

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

Events