feat: 分页组件 (#327)

* feat: 分页组件 * feat: 代码规范化
2026-04-05 02:05:11 +08:00 · 2017-11-17 00:09:42 -06:00
parent 0817411ae8
commit d17f161772
12 changed files with 16184 additions and 0 deletions
--- a/docs/markdown/en-US/pagination.md
+++ b/docs/markdown/en-US/pagination.md
@@ -0,0 +1,104 @@
+
+## Pagination
+
+### Usage
+``` javascript
+import { Pagination } from 'vant';
+
+Vue.component(Pagination.name, Pagination);
+```
+
+### Demo
+
+#### Basic Usage
+
+```html
+<van-pagination 
+  :totalItems="totalItems" 
+  :itemsPerPage="itemsPerPage"
+  :showPageSize="showPageSize2" 
+  previousText= "Prev" 
+  nextText= "Next" 
+  v-model="pagination1" 
+  @change="pageChanged"
+></van-pagination>
+
+<pre>Page: {{pagination1.currentPage}} / {{pagination1.numPages}}</pre>
+```
+
+```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
+<van-pagination 
+  :totalItems="bigTotalItems" 
+  v-model="pagination2" 
+  :previousText="'Prev'" 
+  :nextText="'Next'" 
+  mode="simple" 
+></van-pagination>
+<pre>Page: {{pagination2.currentPage}} / {{pagination2.numPages}}</pre>
+```
+
+#### Advanced Usage
+
+Set `forceEllipses: true`, show ellipses
+
+```html
+<van-pagination 
+  :totalItems="bigTotalItems" 
+  v-model="pagination3" 
+  :showPageSize="showPageSize" 
+  :forceEllipses="true"
+  previousText= "Prev" 
+  nextText= "Next" 
+></van-pagination>
+
+<pre>Page: {{pagination3.currentPage}} / {{pagination3.numPages}}</pre>
+```
+
+### 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 | - |
--- a/docs/markdown/index.js
+++ b/docs/markdown/index.js
@@ -41,6 +41,7 @@ export default {
  'zh-CN/nav-bar': wrapper(r => require.ensure([], () => r(require('./zh-CN/nav-bar.md')), 'zh-CN/nav-bar')),
  'zh-CN/notice-bar': wrapper(r => require.ensure([], () => r(require('./zh-CN/notice-bar.md')), 'zh-CN/notice-bar')),
  'zh-CN/number-keyboard': wrapper(r => require.ensure([], () => r(require('./zh-CN/number-keyboard.md')), 'zh-CN/number-keyboard')),
+  'zh-CN/pagination': wrapper(r => require.ensure([], () => r(require('./zh-CN/pagination.md')), 'zh-CN/pagination')),
  'zh-CN/panel': wrapper(r => require.ensure([], () => r(require('./zh-CN/panel.md')), 'zh-CN/panel')),
  'zh-CN/password-input': wrapper(r => require.ensure([], () => r(require('./zh-CN/password-input.md')), 'zh-CN/password-input')),
  'zh-CN/picker': wrapper(r => require.ensure([], () => r(require('./zh-CN/picker.md')), 'zh-CN/picker')),
@@ -91,6 +92,7 @@ export default {
  'en-US/nav-bar': wrapper(r => require.ensure([], () => r(require('./en-US/nav-bar.md')), 'en-US/nav-bar')),
  'en-US/notice-bar': wrapper(r => require.ensure([], () => r(require('./en-US/notice-bar.md')), 'en-US/notice-bar')),
  'en-US/number-keyboard': wrapper(r => require.ensure([], () => r(require('./en-US/number-keyboard.md')), 'en-US/number-keyboard')),
+  'en-US/pagination': wrapper(r => require.ensure([], () => r(require('./en-US/pagination.md')), 'en-US/pagination')),
  'en-US/panel': wrapper(r => require.ensure([], () => r(require('./en-US/panel.md')), 'en-US/panel')),
  'en-US/password-input': wrapper(r => require.ensure([], () => r(require('./en-US/password-input.md')), 'en-US/password-input')),
  'en-US/picker': wrapper(r => require.ensure([], () => r(require('./en-US/picker.md')), 'en-US/picker')),
--- a/docs/markdown/zh-CN/pagination.md
+++ b/docs/markdown/zh-CN/pagination.md
@@ -0,0 +1,104 @@
+
+## Pagination 分页
+
+### 使用指南
+``` javascript
+import { Pagination } from 'vant';
+
+Vue.component(Pagination.name, Pagination);
+```
+
+### 代码演示
+
+#### 基础用法
+
+```html
+<van-pagination 
+  :totalItems="totalItems" 
+  :itemsPerPage="itemsPerPage"
+  :showPageSize="showPageSize2" 
+  previousText= "上一页" 
+  nextText= "下一页" 
+  v-model="pagination1" 
+  @change="pageChanged"
+></van-pagination>
+
+<pre>Page: {{pagination1.currentPage}} / {{pagination1.numPages}}</pre>
+```
+
+```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
+    }
+  }
+}
+```
+
+设置`mode=simple`，使用简单模式
+
+```html
+<van-pagination 
+  :totalItems="bigTotalItems" 
+  v-model="pagination2" 
+  previousText="上一页" 
+  nextText="下一页" 
+  mode="simple" 
+></van-pagination>
+<pre>Page: {{pagination2.currentPage}} / {{pagination2.numPages}}</pre>
+```
+
+#### 高级用法
+
+设置 `forceEllipses: true`，显示省略号
+
+```html
+<van-pagination 
+  :totalItems="bigTotalItems" 
+  v-model="pagination3" 
+  :showPageSize="showPageSize" 
+  :forceEllipses="true"
+  previousText= "上一页" 
+  nextText= "下一页" 
+></van-pagination>
+
+<pre>Page: {{pagination3.currentPage}} / {{pagination3.numPages}}</pre>
+```
+
+### API
+
+| 参数 | 说明 | 类型 | 默认值 | 可选值 |
+|-----------|-----------|-----------|-------------|-------------|
+| v-model | 当前页码 | Object | - | - |
+| mode | 显示模式 | String | multi | multi : simple  |
+| itemsPerPage | 每页记录数 | Number | 10 | - |
+| previousText | 上一页 | String | Previous | - |
+| nextText | 下一页 | String | Next | - |
+| showPageSize | 显示的页码个数 | Number | 5 | - |
+| forceEllipses | 显示省略号 | Boolean | false | - |
+
+### Event
+
+| 事件名 | 说明 | 参数 |
+|-----------|-----------|-----------|
+| change | 页码改变时触发 | - |