Pagination: add prev-click and next-click events (#10755)

examples/docs/en-US/pagination.md

@@ -226,8 +226,10 @@ Add more modules based on your scenario.
 ### Events
 | Event Name | Description | Parameters |
 |---------|--------|---------|
-| size-change | triggers when `page-size` changes | the new `page-size` |
-| current-change | triggers when `current-page` changes | the new `current-page` |
+| size-change | triggers when `page-size` changes | the new page size |
+| current-change | triggers when `current-page` changes | the new current page |
+| prev-click | triggers when the prev button is clicked and current page changes | the new current page |
+| next-click | triggers when the next button is clicked and current page changes | the new current page |
 
 ### Slot
 | Name | Description |

examples/docs/es/pagination.md

@@ -214,6 +214,8 @@ Agrega más modulos basados en su escenario.
 | ----------------- | --------------------------------------- | ----------------------------- |
 | size-change       | se dispara cuando `page-size` cambia    | nuevo valor de `page-size`    |
 | current-change    | se dispara cuando `current-page` cambia | nuevo valor de `current-page` |
+| prev-click | triggers when the prev button is clicked and current page changes | the new current page |
+| next-click | triggers when the next button is clicked and current page changes | the new current page |
 
 ### Slot
 | Nombre | Descripción                              |

examples/docs/zh-CN/pagination.md

@@ -226,8 +226,10 @@
 ### Events
 | 事件名称 | 说明 | 回调参数 |
 |---------|--------|---------|
-| size-change | pageSize 改变时会触发 | 每页条数`size` |
-| current-change | currentPage 改变时会触发 | 当前页`currentPage` |
+| size-change | pageSize 改变时会触发 | 每页条数 |
+| current-change | currentPage 改变时会触发 | 当前页 |
+| prev-click | 用户点击上一页按钮改变当前页后触发 | 当前页 |
+| next-click | 用户点击下一页按钮改变当前页后触发 | 当前页 |
 
 ### Slot
 | name | 说明 |

packages/pagination/src/pagination.js

@@ -306,6 +306,7 @@ export default {
       if (this.disabled) return;
       const newVal = this.internalCurrentPage - 1;
       this.internalCurrentPage = this.getValidCurrentPage(newVal);
+      this.$emit('prev-click', this.internalCurrentPage);
       this.emitChange();
     },
 
@@ -313,6 +314,7 @@ export default {
       if (this.disabled) return;
       const newVal = this.internalCurrentPage + 1;
       this.internalCurrentPage = this.getValidCurrentPage(newVal);
+      this.$emit('next-click', this.internalCurrentPage);
       this.emitChange();
     },
 

test/unit/specs/pagination.spec.js

@@ -322,6 +322,34 @@ describe('Pagination', () => {
     }, 50);
   });
 
+  it('event: prev and next click', done => {
+    vm = createVue({
+      template: `
+        <el-pagination
+          :total="100"
+          layout="sizes, prev, pager, next"
+          @prev-click="trigger = true"
+          @next-click="trigger = true"
+          :pageSize="10" />
+      `,
+
+      data() {
+        return { trigger: false };
+      }
+    }, true);
+    const prev = vm.$el.querySelector('.btn-prev');
+    const next = vm.$el.querySelector('.btn-next');
+    prev.click();
+    setTimeout(_ => {
+      expect(vm.trigger).to.false;
+      next.click();
+      setTimeout(_ => {
+        expect(vm.trigger).to.true;
+        done();
+      }, 50);
+    }, 50);
+  });
+
   it('pageSize > total', () => {
     vm = createVue({
       template: `