vue2-pagination

vue-pagination

中文文档

Pagination component for Vue.js.

Compatibility Note : vue-pagination requires Vue.js 1.0.0+

Installation

• Script Tag

  <script type="text/javascript" src="http://cdn.bootcss.com/vue/1.0.26/vue.js"></script>
  <script type="text/javascript" src="./dist/vue-pagination.min.js"></script>

• NPM

  I don't publish this repo on npm, you can install by github.

  npm install https://github.com/luoye-fe/vue-pagination.git

Usage

• template

  <v-pagination :pagination-config.sync="config"></v-pagination>

• js

  export default {
      data() {
          return {
              config: {
                  currentPage: 1,
                  itemsPerPage: 10,
                  pagesLength: 5,
                  totalItems: 0,
                  onChange() {}
              }
          };
      },
      ready() {
          this.config.onChange = () => {
              console.log(this.config.currentPage);
          };
      }
  };

Demo

Demo

Options

• use options

  While useing Commonjs/ES6 Module, you should exec Vue.use(VuePagination), at this point you can pass options by Vue.use(VuePagination, optionsObj).

  Name	Type	Default	Required	Description
  tagName	String	vue-pagination		custom tag name

  example

  import Vue from 'vue';
  import VuePagination from 'vue-pagination';
  Vue.use(VuePagination, {
      tagName: 'vue-pagintaion'
  })

• pagination config

  vue-pagination accept props named pagination-config.sync, you must pass some required options, all options as follows.

  Name	Type	Default	Required	Description
  firstStr	String	First	false	First button text
  prevStr	String	Prev	false	Prev button text
  nextStr	String	Next	false	Next button text
  lastStr	String	Last	false	Last button text
  first	Boolean	True	false	Need first button or not
  prev	Boolean	True	false	Need prev button or not
  next	Boolean	True	false	Need next button or not
  last	Boolean	True	false	Need last button or not
  normal	Boolean	True	false	Need normal page list or not
  currentPage	Number	1	false	CurrentPage
  itemsPerPage	Number	10	false	Item number every page
  pagesLength	Number	5	false	Normal page list length
  totalItems	Number	0	true	Total items number (calculate numbers of page by this)
  onChange	Function		false	Callback function when currentPage change