A Vue.js pagination component.
Providing simple API, to customize pages, color and other styles very easily.
View Demo
Try Demo on Codepen
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)Use the source file in browser.
<script src="https://unpkg.com/vue-handy-pagination@latest/dist/pagination.js"></script><pagination
totalPages="28"
initialPage="1">
</pagination>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>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>| 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 |
| 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)" |
![dependabot[bot] avatar](https://avatars.githubusercontent.com/in/29110?v=4 "dependabot[bot]")
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent