A simple pagination bar, including length Menu, i18n support, based on Vue2.x
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
dist
src
.babelrc
.editorconfig
.gitignore
LICENSE
README.md
package.json
webpack.config.js

README.md

v-page



A simple pagination bar, including length Menu, i18n support, based on Vue2

v-page






Demo、Document、Changelog

Explorer on

the jQuery version: bPage



Vue plugin series

Plugin Status Description
v-page npm version A simple pagination bar, including length Menu, i18n support
v-dialogs npm version A simple and powerful dialog, including Modal, Alert, Mask and Toast modes
v-tablegrid npm version A simpler to use and practical datatable
v-uploader npm version A Vue2 plugin to make files upload simple and easier,
you can drag files or select file in dialog to upload
v-ztree npm version A simple tree for Vue2, support single or multiple(check) select tree,
and support server side data
v-gallery npm version A Vue2 plugin make browsing images in gallery
v-region npm version A simple region selector, provide Chinese administrative division data
v-selectpage npm version A powerful selector for Vue2, list or table view of pagination,
use tags for multiple selection, i18n and server side resources supports
v-suggest npm version A Vue2 plugin for input suggestions by autocomplete
v-playback npm version A Vue2 plugin to make video play easier
v-selectmenu npm version A simple, easier and highly customized menu solution



Install

npm install v-page --save

Include plugin in your main.js file.

import Vue from 'vue'
import vPage from 'v-page';
...

Vue.use(vPage);

Deploy on your component

template code

<template>
  <!-- v-bind 'setting' data to config page bar -->
  <!-- bind event 'page-change' to receive page info change -->
  <v-page :setting="pageSet" @page-change="pageChange"></v-page>
</template>

script code

export default {
  name: 'myComponent',
  data(){
    return {
      pageSet: {
        totalRow: 0,//required option
        language: 'en',//default: 'cn'
        pageSizeMenu: [20,100]//default: [10, 20, 50, 100]
      }
    }
  },
  methods:{
    //receive page info change callback
    pageChange(pInfo){
      console.log(pInfo);//{pageNumber: 1, pageSize: 10}
    }
  }
};