## Pagination ### Usage ``` javascript import { Pagination } from 'vant'; Vue.component(Pagination.name, Pagination); ``` ### Demo #### Basic Usage ```html
Page: {{pagination1.currentPage}} / {{pagination1.numPages}}
``` ```javascript export default { data() { return { totalItems: 24, pagination1: { currentPage: 2 }, pagination2: { currentPage: 1 }, pagination3: { currentPage: 1 }, setPage (pageNo) { this.pagination1.currentPage = pageNo; }, pageChanged () { console.log('Page changed to: ' + this.pagination1.currentPage); }, showPageSize: 3, showPageSize2: 5 bigTotalItems: 125, itemsPerPage: 5 } } } ``` Set `mode=simple` use Simple Mode ```html
Page: {{pagination2.currentPage}} / {{pagination2.numPages}}
``` #### Advanced Usage Set `forceEllipses: true`, show ellipses ```html
Page: {{pagination3.currentPage}} / {{pagination3.numPages}}
``` ### API | Attribute | Description | Type | Default | Accepted Values | |-----------|-----------|-----------|-------------|-------------| | v-model | pageModel | Object | - | - | | mode | mode | String | multi | multi : simple | | itemsPerPage | itemsPerPage | Number | 10 | - | | previousText | previousText | String | Previous | - | | nextText | nextText | String | Next | - | | showPageSize | showPageSize | Number | 5 | - | | forceEllipses | ellipses | Boolean | false | - | ### Event | Event | Description | Attribute | |-----------|-----------|-----------| | change | triggered on page change | - |