A simple pagination bar, including length Menu, i18n support, based on Vue2
Examples and Documentation
Live Examples on CodePen, more exmaples and documentation please visit below sites
The jQuery version: bPage
Installation
npm i -S v-page
Include and install plugin in your main.js
file.
import Vue from 'vue'
import Page from 'v-page'
Vue.use(Page, {
global config options
})
You also can use v-page
in local component
<template>
<v-page></v-page>
</template>
<script>
import { vPage } from 'v-page'
export default {
components: {
'v-page': vPage
}
}
</script>
Usage
<template>
<v-page
:total-row="totalRow"
@page-change="pageChange"
></v-page>
</template>
<script>
export default {
data () {
return {
totalRow: 100 // required option
}
},
methods: {
// receive page info change callback
pageChange (pInfo) {
console.log(pInfo) // { pageNumber: 1, pageSize: 10 }
}
}
}
</script>
Vue plugin series
Plugin | Status | Description |
---|
v-page | | A simple pagination bar, including length Menu, i18n support |
v-dialogs | | A simple and powerful dialog, including Modal, Alert, Mask and Toast modes |
v-tablegrid | | A simpler to use and practical datatable |
v-uploader | | A Vue2 plugin to make files upload simple and easier, you can drag files or select file in dialog to upload |
v-ztree | | A simple tree for Vue2, support single or multiple(check) select tree, and support server side data |
v-gallery | | A Vue2 plugin make browsing images in gallery |
v-region | | A simple region selector, provide Chinese administrative division data |
v-selectpage | | A powerful selector for Vue2, list or table view of pagination, use tags for multiple selection, i18n and server side resources supports |
v-suggest | | A Vue2 plugin for input suggestions by autocomplete |
v-playback | | A Vue2 plugin to make video play easier |
v-selectmenu | | A simple, easier and highly customized menu solution |