feat: 分页组件 (#327)

* feat: 分页组件 * feat: 代码规范化
2025-10-19 18:14:13 +00:00 · 2017-11-17 00:09:42 -06:00
parent 0817411ae8
commit d17f161772
12 changed files with 16184 additions and 0 deletions
--- a/docs/demos/index.js
+++ b/docs/demos/index.js
@@ -32,6 +32,7 @@ export default {
  'nav-bar': r => require.ensure([], () => r(wrapper(require('./views/nav-bar'), 'nav-bar')), 'nav-bar'),
  'notice-bar': r => require.ensure([], () => r(wrapper(require('./views/notice-bar'), 'notice-bar')), 'notice-bar'),
  'number-keyboard': r => require.ensure([], () => r(wrapper(require('./views/number-keyboard'), 'number-keyboard')), 'number-keyboard'),
+  'pagination': r => require.ensure([], () => r(wrapper(require('./views/pagination'), 'pagination')), 'pagination'),
  'panel': r => require.ensure([], () => r(wrapper(require('./views/panel'), 'panel')), 'panel'),
  'password-input': r => require.ensure([], () => r(wrapper(require('./views/password-input'), 'password-input')), 'password-input'),
  'picker': r => require.ensure([], () => r(wrapper(require('./views/picker'), 'picker')), 'picker'),
--- a/docs/demos/views/pagination.vue
+++ b/docs/demos/views/pagination.vue
@@ -0,0 +1,94 @@
+<template>
+  <demo-section>
+    <demo-block :title="$t('basicUsage')">
+      <van-pagination 
+        :totalItems="totalItems" 
+        :itemsPerPage="itemsPerPage"
+        :showPageSize="showPageSize2" 
+        :previousText= "$t('prevText')" 
+        :nextText= "$t('nextText')" 
+        v-model="pagination1" 
+        @change="pageChanged()"
+      ></van-pagination>
+      <pre>Page: {{pagination1.currentPage}} / {{pagination1.numPages}}</pre>
+    </demo-block>
+    <demo-block :title="$t('simpleMode')">
+      <van-pagination 
+        :totalItems="bigTotalItems" 
+        v-model="pagination2" 
+        :previousText= "$t('prevText')" 
+        :nextText= "$t('nextText')" 
+        mode="simple" 
+        size="small" 
+      ></van-pagination>
+      <pre>Page: {{pagination2.currentPage}} / {{pagination2.numPages}}</pre>
+    </demo-block>
+    <demo-block :title="$t('advancedUsage')">
+      <van-pagination 
+        :totalItems="bigTotalItems" 
+        v-model="pagination3" 
+        :showPageSize="showPageSize" 
+        :forceEllipses="true"
+        :previousText= "$t('prevText')" 
+        :nextText= "$t('nextText')" 
+      ></van-pagination>
+
+      <pre>Page: {{pagination3.currentPage}} / {{pagination3.numPages}}</pre>
+    </demo-block>
+  </demo-section>
+</template>
+
+<script>
+export default {
+  i18n: {
+    'zh-CN': {
+      simpleMode: '简单模式',
+      prevText: '上一页',
+      nextText: '下一页'
+    },
+    'en-US': {
+      simpleMode: 'Simple Mode',
+      prevText: 'Prev',
+      nextText: 'Next'
+    }
+  },
+
+  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
+    };
+  }
+};
+</script>
+
+<style lang="postcss">
+.demo-pagination {
+  .van-pagination {
+    margin: 5px 0;
+    width: 100%;
+  }
+
+  .van-doc-demo-block {
+    padding: 0 15px;
+  }
+}
+</style>
--- 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 | 页码改变时触发 | - |
--- a/docs/src/doc.config.js
+++ b/docs/src/doc.config.js
@@ -110,6 +110,10 @@ module.exports = {
                path: '/notice-bar',
                title: 'NoticeBar - 通告栏'
              },
+              {
+                path: '/pagination',
+                title: 'Pagination - 分页'
+              },
              {
                path: '/panel',
                title: 'Panel - 面板'