feat: 分页组件 (#327)

* feat: 分页组件

* feat: 代码规范化

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'),

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>

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 | - |

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')),

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 | 页码改变时触发 | - |

docs/src/doc.config.js

@@ -110,6 +110,10 @@ module.exports = {
                 path: '/notice-bar',
                 title: 'NoticeBar - 通告栏'
               },
+              {
+                path: '/pagination',
+                title: 'Pagination - 分页'
+              },
               {
                 path: '/panel',
                 title: 'Panel - 面板'

packages/index.js

@@ -32,6 +32,7 @@ import Locale from './locale';
 import NavBar from './nav-bar';
 import NoticeBar from './notice-bar';
 import NumberKeyboard from './number-keyboard';
+import Pagination from './pagination';
 import Panel from './panel';
 import PasswordInput from './password-input';
 import Picker from './picker';
@@ -92,6 +93,7 @@ const components = [
   NavBar,
   NoticeBar,
   NumberKeyboard,
+  Pagination,
   Panel,
   PasswordInput,
   Picker,
@@ -166,6 +168,7 @@ export {
   NavBar,
   NoticeBar,
   NumberKeyboard,
+  Pagination,
   Panel,
   PasswordInput,
   Picker,

packages/pagination/index.vue

@@ -0,0 +1,189 @@
+<template>
+  <ul :class="['van-pagination', { 'van-pagination-simple': !isMultiMode }]">
+    <li
+      :class="[{ 'van-pagination--disabled': isNoPrevious } , 'van-pagination__item', 'van-pagination__prev', 'van-hairline']"
+      @click="selectPage(currentPage - 1, $event)"
+    >
+      {{ previousText }}
+    </li>
+    <li 
+      v-if="isMultiMode" 
+      v-for="(page, index) in pages" 
+      :key="index" 
+      :class="[{ 'van-pagination--active': page.active }, 'van-pagination__item', 'van-pagination__page', 'van-hairline']"
+      @click="selectPage(page.number, $event)"
+    >
+      {{ page.text }}
+    </li>
+    <li v-if="!isMultiMode" class="van-pagination__page-desc">
+      <slot name="pageDesc">{{ pageDesc }}</slot>
+    </li>
+    <li 
+      :class="[{ 'van-pagination--disabled': isNoNext }, 'van-pagination__item', 'van-pagination__next', 'van-hairline']" 
+       @click="selectPage(currentPage + 1, $event)"
+    >
+      {{ nextText }}
+    </li>
+  </ul>
+</template>
+
+<script>
+export default {
+  name: 'van-pagination',
+
+  props: {
+    mode: {
+      type: String,
+      default: 'multi'
+    },
+    forceEllipses: Boolean,
+    itemsPerPage: {
+      type: Number,
+      default: 10
+    },
+    showPageSize: {
+      type: Number,
+      default: 5,
+      validator: value => typeof value === 'number' && value >= 1
+    },
+    /* vModel { currentPage: 1, numPages: 10 } */
+    value: {
+      type: Object,
+      required: true,
+      validator: function(value) {
+        return (
+          value &&
+          value.currentPage != undefined &&
+          typeof value.currentPage === 'number'
+        );
+      }
+    },
+    previousText: {
+      type: String,
+      default: 'Previous'
+    },
+    nextText: {
+      type: String,
+      default: 'Next'
+    },
+    totalItems: {
+      type: Number,
+      default: 0
+    }
+  },
+
+  data() {
+    const currentPage = this.value.currentPage !== undefined ? this.value.currentPage : 1;
+    let totalPages = this.itemsPerPage < 1 ? 1 : Math.ceil(this.totalItems / this.itemsPerPage);
+    totalPages = Math.max(totalPages, 1);
+
+    return { currentPage, totalPages };
+  },
+
+  computed: {
+    isMultiMode() {
+      return this.mode === 'multi';
+    },
+
+    isNoPrevious() {
+      return this.value.currentPage === 1;
+    },
+
+    isNoNext() {
+      return this.value.currentPage === this.totalPages;
+    },
+
+    pages() {
+      const pages = [];
+
+      if (this.currentPage <= 0 || this.currentPage > this.totalPages) {
+        return pages;
+      }
+
+      // Default page limits
+      let startPage = 1,
+        endPage = this.totalPages;
+      const isMaxSized = this.showPageSize !== undefined && this.showPageSize < this.totalPages;
+
+      // recompute if showPageSize
+      if (isMaxSized) {
+        // Current page is displayed in the middle of the visible ones
+        startPage = Math.max(
+          this.currentPage - Math.floor(this.showPageSize / 2),
+          1
+        );
+        endPage = startPage + this.showPageSize - 1;
+
+        // Adjust if limit is exceeded
+        if (endPage > this.totalPages) {
+          endPage = this.totalPages;
+          startPage = endPage - this.showPageSize + 1;
+        }
+      }
+
+      // Add page number links
+      for (let number = startPage; number <= endPage; number++) {
+        let page = this.makePage(number, number, number === this.currentPage);
+        pages.push(page);
+      }
+
+      // Add links to move between page sets
+      if (isMaxSized && this.showPageSize > 0 && this.forceEllipses) {
+        if (startPage > 1) {
+          //need ellipsis for all options unless range is too close to beginning
+          let previousPageSet = this.makePage(startPage - 1, '...', false);
+          pages.unshift(previousPageSet);
+        }
+
+        if (endPage < this.totalPages) {
+          //need ellipsis for all options unless range is too close to end
+          let nextPageSet = this.makePage(endPage + 1, '...', false);
+          pages.push(nextPageSet);
+        }
+      }
+
+      return pages;
+    },
+    pageDesc() {
+      return this.currentPage + '/' + this.totalPages;
+    }
+  },
+
+  created() {
+    // 初始value值
+    this.triggerInput();
+  },
+
+  watch: {
+    'value.currentPage'(value, oldValue) {
+      this.currentPage = value;
+
+      this.$emit('change');
+    }
+  },
+
+  methods: {
+    selectPage(page, evt) {
+      if (this.currentPage !== page && page > 0 && page <= this.totalPages) {
+        this.currentPage = page;
+      }
+
+      this.triggerInput();
+    },
+
+    triggerInput() {
+      //  Emit the new data to the parent.
+      this.$emit('input', this.createDataForModel(this.currentPage, this.totalPages));
+    },
+
+    makePage(number, text, active) {
+      return { number, text, active };
+    },
+
+    createDataForModel(currentPage, numPages) {
+      let data = { currentPage, numPages };
+      return data;
+    }
+  }
+};
+</script>

packages/vant-css/src/index.css

@@ -18,6 +18,7 @@
 @import './notice-bar.css';
 @import './popup.css';
 @import './search.css';
+@import './pagination.css';
 @import './panel.css';
 @import './steps.css';
 @import './tag.css';

packages/vant-css/src/pagination.css

@@ -0,0 +1,74 @@
+@import './common/var.css';
+
+.van-pagination {
+  display: flex;
+  text-align: center;
+  line-height: 40px;
+  font-size: 14px;
+
+  &__item {
+    flex: 1;
+    height: 40px;
+    min-width: 36px;
+    color: $blue;
+    background-color: $white;
+    box-sizing: border-box;
+    user-select: none;
+
+    &:active {
+      background-color: $blue;
+      color: $white;
+      opacity: 0.8;
+    }
+
+    &::after {
+      border-width: 1px 0 1px 1px;
+    }
+
+    &:last-child::after {
+      border-right-width: 1px;
+    }
+  }
+
+  &__prev,
+  &__next {
+    &.van-pagination__item {
+      padding: 0 5px;
+    }
+  }
+
+  &__page {
+    flex-grow: 0;
+
+    &.van-pagination--active {
+      background-color: $blue;
+      color: $white;
+    }
+  }
+
+  &--disabled {
+
+    &.van-pagination__item {
+      background-color: $background-color;
+      color: $gray-darker;
+      opacity: 0.6;
+    }
+  }
+
+  &__page-desc {
+    flex: 1;
+    height: 40px;
+    color: $gray-darker;
+  }
+}
+
+.van-pagination-simple {
+
+  .van-pagination__prev,
+  .van-pagination__next {
+
+    &.van-pagination__item::after {
+      border-width: 1px;
+    }
+  }
+}

test/unit/specs/pagination.spec.js

@@ -0,0 +1,122 @@
+import Vue from 'vue';
+import { mount } from 'avoriaz';
+import Pagination from 'packages/pagination';
+
+describe('Pagination', () => {
+  let wrapper;
+  afterEach(() => {
+    wrapper && wrapper.destroy();
+  });
+
+  it('create a multi Pagination', done => {
+    wrapper = mount(Pagination, {
+      propsData: {
+        mode: 'multi',
+        totalItems: 120,
+        itemsPerPage: 10,
+        showPageSize: 5,
+        value: {
+          currentPage: 2
+        }
+      }
+    });
+    expect(wrapper.hasClass('van-pagination')).to.be.true;
+    expect(wrapper.find('.van-pagination__item').length).to.equal(7);
+    expect(
+      wrapper.find('.van-pagination__item')[0].hasClass('van-pagination__prev')
+    ).to.be.true;
+    expect(wrapper.vm.value.currentPage).to.equal(2);
+
+    const eventStub = sinon.stub(wrapper.vm, '$emit');
+    wrapper.find('.van-pagination__next')[0].trigger('click');
+    Vue.nextTick(() => {
+      expect(eventStub.calledWith('input'));
+      expect(eventStub.calledWith('change'));
+      // expect(wrapper.data().currentPage).to.equal(5);
+      done();
+    });
+
+    wrapper.vm.value = { currentPage: 12 };
+    wrapper.update();
+    Vue.nextTick(() => {
+      expect(
+        wrapper
+          .find('.van-pagination__next')[0]
+          .hasClass('van-pagination--disabled')
+      ).to.be.true;
+      done();
+    });
+  });
+
+  it('create a multi forceEllipses Pagination', done => {
+    wrapper = mount(Pagination, {
+      propsData: {
+        mode: 'multi',
+        totalItems: 120,
+        itemsPerPage: 10,
+        showPageSize: 5,
+        forceEllipses: true,
+        value: {
+          currentPage: 1
+        }
+      }
+    });
+
+    const ellipsesLink = wrapper.find('.van-pagination__page')[5];
+    expect(ellipsesLink.element.textContent.trim()).to.equal('...');
+
+    wrapper.vm.value = { currentPage: 7 };
+    wrapper.update();
+    Vue.nextTick(() => {
+      // expect(wrapper.find('.van-pagination__item').length).to.equal(2);
+      // expect(wrapper.data().pages.length).to.equal(2);
+      const ellipsesLink = wrapper.find('.van-pagination__page')[0];
+      expect(ellipsesLink.element.textContent.trim()).to.equal('...');
+      done();
+    });
+  });
+
+  it('create a simple Pagination', () => {
+    wrapper = mount(Pagination, {
+      propsData: {
+        mode: 'simple',
+        totalItems: 120,
+        itemsPerPage: 10,
+        value: {
+          currentPage: 1
+        }
+      }
+    });
+    expect(wrapper.hasClass('van-pagination')).to.be.true;
+    expect(wrapper.find('.van-pagination__item').length).to.equal(2);
+    expect(
+      wrapper.find('.van-pagination__item')[0].hasClass('van-pagination__prev')
+    ).to.be.true;
+  });
+
+  it('create a empty Pagination', done => {
+    wrapper = mount(Pagination, {
+      propsData: {
+        mode: 'multi',
+        totalItems: 120,
+        itemsPerPage: 10,
+        showPageSize: 5,
+        nextText: '下一页',
+        previousText: '上一页',
+        value: {
+          currentPage: 2
+        }
+      }
+    });
+
+    expect(wrapper.find('.van-pagination__prev')[0].element.textContent.trim()).to.equal('上一页');
+    expect(wrapper.find('.van-pagination__next')[0].element.textContent.trim()).to.equal('下一页');
+
+    wrapper.vm.value = { currentPage: 18 };
+    wrapper.update();
+    Vue.nextTick(() => {
+      expect(wrapper.find('.van-pagination__page').length).to.equal(0);
+      done();
+    });
+  });
+});