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