v-page

v-page ·

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

Examples and Documentation

Live Examples on CodePen, more exmaples and documentation please visit below sites

• English site
• 国内站点

The jQuery version: bPage

Installation

npm i -S v-page

Include and install plugin in your main.js file.

// add component in global scope as plugin
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 { Page } from 'v-page'
export default {
  components: {
    'v-page': Page
  }
}
</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>

Changelog

3.0.0-beta.1 (2022-08-26)

Features

• Refactor v-page with vue3 composition api
• Change module bundler library from webpack to vite
• Change unit test library from mocha to vitest
• page-change event rename to change