diff --git a/docs/demos/views/pagination.vue b/docs/demos/views/pagination.vue index 19a3c25dc..996780558 100644 --- a/docs/demos/views/pagination.vue +++ b/docs/demos/views/pagination.vue @@ -2,38 +2,34 @@ -
Page: {{pagination1.currentPage}} / {{pagination1.numPages}}
+ />
- + + -
Page: {{pagination2.currentPage}} / {{pagination2.numPages}}
+ />
- + + - -
Page: {{pagination3.currentPage}} / {{pagination3.numPages}}
+ />
@@ -42,12 +38,14 @@ export default { i18n: { 'zh-CN': { - simpleMode: '简单模式', + title2: '简单模式', + title3: '', prevText: '上一页', nextText: '下一页' }, 'en-US': { - simpleMode: 'Simple Mode', + title2: 'Simple Mode', + title3: 'Show ellipses', prevText: 'Prev', nextText: 'Next' } @@ -55,26 +53,9 @@ 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 + currentPage1: 1, + currentPage2: 1, + currentPage3: 1, }; } }; @@ -90,5 +71,9 @@ export default { .van-doc-demo-block { padding: 0 15px; } + + .van-doc-demo-block__title { + padding-left: 0; + } } diff --git a/docs/markdown/en-US/pagination.md b/docs/markdown/en-US/pagination.md index 5e1f28c63..3d246b832 100644 --- a/docs/markdown/en-US/pagination.md +++ b/docs/markdown/en-US/pagination.md @@ -1,104 +1,69 @@ - ## Pagination -### Usage +### Install ``` javascript import { Pagination } from 'vant'; Vue.component(Pagination.name, Pagination); ``` -### Demo +### Usage #### Basic Usage ```html - -
Page: {{pagination1.currentPage}} / {{pagination1.numPages}}
+ v-model="currentPage" + :totalItems="24" + :itemsPerPage="5" +/> ``` ```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 + currentPage: 1 } } } ``` -Set `mode=simple` use Simple Mode +#### Simple mode ```html -
Page: {{pagination2.currentPage}} / {{pagination2.numPages}}
+/> ``` -#### Advanced Usage - -Set `forceEllipses: true`, show ellipses +#### 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 | - | +| v-model | pageModel | `Object` | - | - | +| mode | mode | `String` | `multi` | `simple` | +| itemsPerPage | itemsPerPage | `Number` | `10` | - | +| prevText | previousText | `String` | `Previous` | - | +| nextText | nextText | `String` | `Next` | - | +| showPageSize | showPageSize | `Number` | `5` | - | +| forceEllipses | ellipses | `Boolean` | `false` | - | ### Event | Event | Description | Attribute | |-----------|-----------|-----------| -| change | triggered on page change | - | +| change | Triggered on page change | - | diff --git a/docs/markdown/zh-CN/pagination.md b/docs/markdown/zh-CN/pagination.md index 6f8322438..4f747804b 100644 --- a/docs/markdown/zh-CN/pagination.md +++ b/docs/markdown/zh-CN/pagination.md @@ -12,90 +12,57 @@ Vue.component(Pagination.name, Pagination); #### 基础用法 + ```html - -
Page: {{pagination1.currentPage}} / {{pagination1.numPages}}
+ v-model="currentPage" + :totalItems="24" + :itemsPerPage="5" +/> ``` ```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 + currentPage: 1 } } } ``` -设置`mode=simple`,使用简单模式 +#### 简单模式 ```html -
Page: {{pagination2.currentPage}} / {{pagination2.numPages}}
+/> ``` -#### 高级用法 - -设置 `forceEllipses: true`,显示省略号 +#### 显示省略号 ```html - -
Page: {{pagination3.currentPage}} / {{pagination3.numPages}}
+/> ``` ### API | 参数 | 说明 | 类型 | 默认值 | 可选值 | |-----------|-----------|-----------|-------------|-------------| -| v-model | 当前页码 | Object | - | - | -| mode | 显示模式 | String | multi | multi : simple | -| itemsPerPage | 每页记录数 | Number | 10 | - | -| previousText | 上一页 | String | Previous | - | -| nextText | 下一页 | String | Next | - | -| showPageSize | 显示的页码个数 | Number | 5 | - | -| forceEllipses | 显示省略号 | Boolean | false | - | +| v-model | 当前页码 | `Object` | - | - | +| mode | 显示模式 | `String` | `multi` | `simple` | +| itemsPerPage | 每页记录数 | `Number` | `10` | - | +| previousText | 上一页 | `String` | `上一页` | - | +| nextText | 下一页 | `String` | `下一页` | - | +| showPageSize | 显示的页码个数 | `Number` | `5` | - | +| forceEllipses | 显示省略号 | `Boolean` | `false` | - | ### Event diff --git a/docs/src/doc.config.js b/docs/src/doc.config.js index 5eb2fce6a..794ba2a67 100644 --- a/docs/src/doc.config.js +++ b/docs/src/doc.config.js @@ -386,6 +386,10 @@ module.exports = { path: '/notice-bar', title: 'NoticeBar' }, + { + path: '/pagination', + title: 'Pagination' + }, { path: '/panel', title: 'Panel' diff --git a/docs/src/utils/lang.js b/docs/src/utils/lang.js index 0f117b40b..2698ef3d4 100644 --- a/docs/src/utils/lang.js +++ b/docs/src/utils/lang.js @@ -7,6 +7,11 @@ const langMap = { 'zh-CN': zhCN }; +const titleMap = { + 'en-US': 'Vant - A Vue.js 2.0 Mobile UI at YouZan', + 'zh-CN': 'Vant - 有赞移动端 Vue 组件库' +}; + const userLang = window.localStorage.getItem('VANT_LANGUAGE') || window.navigator.language || 'en-US'; let defaultLang = 'en-US'; if (userLang.indexOf('zh-') !== -1) { @@ -17,4 +22,5 @@ setLang(defaultLang); export function setLang(lang) { window.localStorage.setItem('VANT_LANGUAGE', lang); Locale.use(lang, langMap[lang]); + document.title = titleMap[lang]; } diff --git a/packages/locale/lang/en-US.js b/packages/locale/lang/en-US.js index a2cd7596d..a96dbbcd3 100644 --- a/packages/locale/lang/en-US.js +++ b/packages/locale/lang/en-US.js @@ -60,6 +60,10 @@ export default { delete: 'Delete', confirmDelete: 'Are you sure you want to delete this contact?' }, + vanPagination: { + prev: 'Previous', + next: 'Next' + }, vanPullRefresh: { pullingText: 'Pull to refresh...', loosingText: 'Loose to refresh...', diff --git a/packages/locale/lang/zh-CN.js b/packages/locale/lang/zh-CN.js index c3d44d2b3..cbf0f6e7b 100644 --- a/packages/locale/lang/zh-CN.js +++ b/packages/locale/lang/zh-CN.js @@ -64,6 +64,10 @@ export default { vanPicker: { confirm: '完成' }, + vanPagination: { + prev: '上一页', + next: '下一页' + }, vanPullRefresh: { pullingText: '下拉即可刷新...', loosingText: '释放即可刷新...', diff --git a/packages/pagination/index.vue b/packages/pagination/index.vue index 758d8498c..ea034496f 100644 --- a/packages/pagination/index.vue +++ b/packages/pagination/index.vue @@ -1,70 +1,57 @@