v-simple-paginate
Vue.js (v2.x +) component for make pagination without default styles. This allows you to style the component as you wish.
Demo
Installation
NPM
$ npm i v-simple-paginateYARN
$ yarn add v-simple-paginateCDN
<!-- use the latest release -->
<script src="https://unpkg.com/v-simple-paginate@latest"></script>
<!-- or use the specify version -->
<script src="https://unpkg.com/v-simple-paginate@2.0.0"></script>Register the component
Global
- ES5
var Vue = require('vue');
var Paginate = require('v-simple-paginate');
Vue.component('paginate', Paginate);- ES6+
import Vue from 'vue';
import Paginate from 'v-simple-paginate';
Vue.component('paginate', Paginate);Local
import Paginate from 'v-simple-paginate';
export default {
components: { Paginate }
}Usage
Basic Usage
<paginate
:value="currentPage"
:per-page="perPage"
:total="total"
@input="callback()"
/>Note: In vue template, camelCase and kebab-case are both supported. For example, you can either use prop page-count or pageCount. They are leading to the same result.
So this is also available
<paginate
v-model="currentPage"
:perPage="perPage"
:total="total"
/>Example
<template>
<paginate
:value="currentPage"
:per-page="perPage"
:total="total"
@input="callback"
/>
</template>
<script>
export default {
data: () => ({
total: 500,
perPage: 10,
currentPage: 1,
}),
methods: {
callback (pageNumber) => {
console.log(pageNumber);
...
this.currentPage = pageNumber;
}
}
}
</script>
<style lang="css">
.active {
background-color: red;
}
.hide {
display: none;
}
</style>Props
| Name | Type | Required | Description |
|---|---|---|---|
value |
Number |
true | Current page. |
perPage |
Number |
true | Number of items per page. |
total |
Number |
true | Total items. |
pageRange |
Number |
false | The range of visible elements around the active page. Default: 2 |
showPrevNext |
Boolean |
false | Will the previous and next buttons be visible. Default: true |
activeClass |
String |
false | CSS class name for active page element. Default: 'active' |
btnHideClass |
String |
false | CSS class name for active page element. Default: 'active' |
classes |
Object |
false | An object with CSS classes to customization the component. |
About props classes
| Name | Description |
|---|---|
wrapperClass |
CSS class name for wrapper the component. |
itemClass |
CSS class name for all items (buttons and break view). |
btnClass |
CSS class name for buttons class. |
breakViewClass |
CSS class name for break view. |
prevNextClass |
CSS class name for previous and next buttons. |
Default:
{
wrapperClass: 'v-simple-pagination',
itemClass: '',
btnClass: '',
breakViewClass: '',
prevNextClass: '',
}Slots
| Name | Description |
|---|---|
prevContent |
Previous button |
nextContent |
Next button |
breakViewContent |
Break view indicator |
Example
<paginate
:value="currentPage"
:perPage="perPage"
:total="total"
@input="callback"
>
<template v-slot:prevPage>PREV</template>
<template v-slot:nextPage>NEXT</template>
<template v-slot:breakView>...</template>
</paginate>Emit
Emit: input is a callback with the param page number to update the current page.