A simple pagination component for Vue.
Online demo: JSFiddle (used styles from Bootstrap 4)
- Vue.js 2 - progressive JavaScript framework
yarn add vue-plain-paginationnpm install vue-plain-pagination<script src="//unpkg.com/vue-plain-pagination@0.2.1"></script><template>
<div>
<p>Current page: {{ currentPage }}</p>
<v-pagination v-model="currentPage" :page-count="30"></v-pagination>
</div>
</template>
<script>
import vPagination from 'vue-plain-pagination'
export default {
components: { vPagination },
data() {
return {
currentPage: 1
}
}
}
</script><!doctype html>
<html lang="en">
<head>
<title>vue-plain-pagination</title>
</head>
<body>
<div id="app">
<p>page: {{ currentPage }}</p>
<v-pagination v-model="currentPage" :page-count="total"></v-pagination>
</div>
<script src="//unpkg.com/vue"></script>
<script src="//unpkg.com/vue-plain-pagination"></script>
<script>
Vue.component('v-pagination', window['vue-plain-pagination'])
new Vue({
el: '#app',
data: {
currentPage: 5,
total: 9,
},
})
</script>
</body>
</html>Using classes and labels you can change default CSS class names of every HTML tag of pagination and anchor from
first/prev/next/last buttons.
<template>
<div>
<p>Current page: {{ currentPage }}</p>
<v-pagination v-model="currentPage"
:page-count="totalPages"
:classes="bootstrapPaginationClasses"
:labels="paginationAnchorTexts"></v-pagination>
</div>
</template>
<script>
import vPagination from 'vue-plain-pagination'
export default {
components: { vPagination },
data() {
return {
currentPage: 1,
totalPages: 30,
bootstrapPaginationClasses: {
ul: 'pagination',
li: 'page-item',
liActive: 'active',
liDisable: 'disabled',
button: 'page-link'
},
paginationAnchorTexts: {
first: 'First',
prev: 'Previous',
next: 'Next',
last: 'Last'
}
}
}
}
</script>demo: JSFiddle
| name | type | required | |
|---|---|---|---|
v-model |
Number | yes | Current page. |
page-count |
Number | yes | Number of pages. |
classes |
Object | no | Class names of used HTML tag. |
labels |
Object | no | HTML/text of prev/next button. |
Default value of classes:
{
ul: 'pagination',
li: 'pagination-item',
liActive: 'pagination-item--active',
liDisable: 'pagination-item--disable',
button: 'pagination-link',
buttonActive: 'pagination-link--active',
buttonDisable: 'pagination-link--disable'
}
Default value of labels:
{
first: '«',
prev: '‹',
next: '›',
last: '»'
}
Files structure is generated by Vue CLI 3 (babel, eslint).
# install dependencies
yarn install
# compiles and hot-reloads for development
yarn run serve
# compiles bundle for production
yarn run build-lib
# lints and fixes files
yarn run lint
# install dependencies
npm install
# compiles and hot-reloads for development
npm run serve
# compiles bundle for production
npm run build-lib
# lints and fixes files
npm run lint
Code released under the MIT license.