Merge pull request #651 from furybean/pagination-event

Pagination: rename currentchange & sizechange.

CHANGELOG.md

@@ -28,6 +28,7 @@
 - 全屏 Loading 现在默认不再锁定屏幕滚动。如果需要的话，可添加 `lock` 修饰符
 - Table 删除属性 fixedColumnCount, customCriteria, customBackgroundColors
 - Table 的 selectionchange、cellmouseenter、cellmouseleave、cellclick 事件更名为 selection-change、cell-mouse-enter、cell-mouse-leave、cell-click。
+- Pagination 的 currentchange、sizechange 事件更名为 current-change、size-change
 
 ### 1.0.0-rc.7
 

examples/docs/zh-cn/pagination.md

@@ -42,15 +42,15 @@
 
 根据场景需要，可以添加其他功能模块。
 
-:::demo 此例是一个完整的用例，使用了`sizechange`和`currentchange`事件来处理页码大小和当前页变动时候触发的事件。`page-sizes`接受一个整型数组，数组元素为展示的选择每页显示个数的选项，`[100, 200, 300, 400]`表示四个选项，每页显示 100 个，200 个，300 个或者 400 个。
+:::demo 此例是一个完整的用例，使用了`size-change`和`current-change`事件来处理页码大小和当前页变动时候触发的事件。`page-sizes`接受一个整型数组，数组元素为展示的选择每页显示个数的选项，`[100, 200, 300, 400]`表示四个选项，每页显示 100 个，200 个，300 个或者 400 个。
 
 ```html
 <template>
   <div class="block">
     <span class="demonstration">显示总数</span>
     <el-pagination
-      @sizechange="handleSizeChange"
-      @currentchange="handleCurrentChange"
+      @size-change="handleSizeChange"
+      @current-change="handleCurrentChange"
       :current-page="5"
       :page-size="100"
       layout="total, prev, pager, next"
@@ -60,8 +60,8 @@
   <div class="block">
     <span class="demonstration">调整每页显示条数</span>
     <el-pagination
-      @sizechange="handleSizeChange"
-      @currentchange="handleCurrentChange"
+      @size-change="handleSizeChange"
+      @current-change="handleCurrentChange"
       :current-page="5"
       :page-sizes="[100, 200, 300, 400]"
       :page-size="100"
@@ -72,8 +72,8 @@
   <div class="block">
     <span class="demonstration">直接前往</span>
     <el-pagination
-      @sizechange="handleSizeChange"
-      @currentchange="handleCurrentChange"
+      @size-change="handleSizeChange"
+      @current-change="handleCurrentChange"
       :current-page="5"
       :page-size="100"
       layout="prev, pager, next, jumper"
@@ -83,8 +83,8 @@
   <div class="block">
     <span class="demonstration">完整功能</span>
     <el-pagination
-      @sizechange="handleSizeChange"
-      @currentchange="handleCurrentChange"
+      @size-change="handleSizeChange"
+      @current-change="handleCurrentChange"
       :current-page="5"
       :page-sizes="[100, 200, 300, 400]"
       :page-size="100"
@@ -191,5 +191,5 @@
 ### Events
 | 事件名称 | 说明 | 回调参数 |
 |---------|--------|---------|
-| sizechange | pageSize 改变时会触发 | 每页条数`size` |
-| currentchange | currentPage 改变时会触发 | 当前页`currentPage` |
+| size-change | pageSize 改变时会触发 | 每页条数`size` |
+| current-change | currentPage 改变时会触发 | 当前页`currentPage` |

packages/pagination/src/pager.vue

@@ -80,7 +80,7 @@
         }
 
         if (newPage !== currentPage) {
-          this.$emit('currentchange', newPage);
+          this.$emit('change', newPage);
         }
       }
     },

packages/pagination/src/pagination.js

@@ -2,10 +2,13 @@ import Vue from 'vue';
 import Pager from './pager.vue';
 import ElSelect from 'element-ui/packages/select';
 import ElOption from 'element-ui/packages/option';
+import Migrating from 'element-ui/src/mixins/migrating';
 
 export default {
   name: 'ElPagination',
 
+  mixins: [Migrating],
+
   props: {
     pageSize: {
       type: Number,
@@ -50,7 +53,7 @@ export default {
     const TEMPLATE_MAP = {
       prev: <prev></prev>,
       jumper: <jumper></jumper>,
-      pager: <pager currentPage={ this.internalCurrentPage } pageCount={ this.pageCount } on-currentchange={ this.handleCurrentChange }></pager>,
+      pager: <pager currentPage={ this.internalCurrentPage } pageCount={ this.pageCount } on-change={ this.handleCurrentChange }></pager>,
       next: <next></next>,
       sizes: <sizes></sizes>,
       slot: <slot></slot>,
@@ -153,7 +156,7 @@ export default {
         handleChange(val) {
           if (val !== this.$parent.internalPageSize) {
             this.$parent.internalPageSize = val = parseInt(val, 10);
-            this.$parent.$emit('sizechange', val);
+            this.$parent.$emit('size-change', val);
           }
         }
       }
@@ -173,7 +176,7 @@ export default {
 
         handleChange({ target }) {
           this.$parent.internalCurrentPage = this.$parent.getValidCurrentPage(target.value);
-          this.$parent.$emit('currentchange', this.$parent.internalCurrentPage);
+          this.$parent.$emit('current-change', this.$parent.internalCurrentPage);
           this.oldValue = null;
         }
       },
@@ -210,9 +213,19 @@ export default {
   },
 
   methods: {
+    getMigratingConfig() {
+      return {
+        props: {},
+        events: {
+          'currentchange': 'Pagination: currentchange has been renamed to current-change',
+          'sizechange': 'Pagination: sizechange has been renamed to size-change'
+        }
+      };
+    },
+
     handleCurrentChange(val) {
       this.internalCurrentPage = this.getValidCurrentPage(val);
-      this.$emit('currentchange', this.internalCurrentPage);
+      this.$emit('current-change', this.internalCurrentPage);
     },
 
     prev() {
@@ -221,7 +234,7 @@ export default {
       this.internalCurrentPage = this.getValidCurrentPage(newVal);
 
       if (this.internalCurrentPage !== oldPage) {
-        this.$emit('currentchange', this.internalCurrentPage);
+        this.$emit('current-change', this.internalCurrentPage);
       }
     },
 
@@ -231,7 +244,7 @@ export default {
       this.internalCurrentPage = this.getValidCurrentPage(newVal);
 
       if (this.internalCurrentPage !== oldPage) {
-        this.$emit('currentchange', this.internalCurrentPage);
+        this.$emit('current-change', this.internalCurrentPage);
       }
     },
 
@@ -242,7 +255,7 @@ export default {
     //   this.internalCurrentPage = this.getValidCurrentPage(newVal);
 
     //   if (this.internalCurrentPage !== oldPage) {
-    //     this.$emit('currentchange', this.internalCurrentPage);
+    //     this.$emit('current-change', this.internalCurrentPage);
     //   }
     // },
 
@@ -252,7 +265,7 @@ export default {
     //   this.internalCurrentPage = this.getValidCurrentPage(newVal);
 
     //   if (this.internalCurrentPage !== oldPage) {
-    //     this.$emit('currentchange', this.internalCurrentPage);
+    //     this.$emit('current-change', this.internalCurrentPage);
     //   }
     // },
 

packages/table/src/table.vue

@@ -143,17 +143,17 @@
       getMigratingConfig() {
         return {
           props: {
-            'allow-no-selection': 'allow-no-selection is removed.',
-            'selection-mode': 'selection-mode is removed.',
-            'fixed-column-count': 'fixed-column-count is removed. Use fixed prop in TableColumn instead.',
-            'custom-criteria': 'custom-criteria is removed. Use row-class-name instead.',
-            'custom-background-colors': 'custom-background-colors is removed. Use row-class-name instead.'
+            'allow-no-selection': 'Table: allow-no-selection has been removed.',
+            'selection-mode': 'Table: selection-mode has been removed.',
+            'fixed-column-count': 'Table: fixed-column-count has been removed. Use fixed prop in TableColumn instead.',
+            'custom-criteria': 'Table: custom-criteria has been removed. Use row-class-name instead.',
+            'custom-background-colors': 'custom-background-colors has been removed. Use row-class-name instead.'
           },
           events: {
-            selectionchange: 'selectionchange is renamed to selection-change.',
-            cellmouseenter: 'cellmouseenter is renamed to cell-mouse-enter.',
-            cellmouseleave: 'cellmouseleave is renamed to cell-mouse-leave.',
-            cellclick: 'cellclick is renamed to cell-click.'
+            selectionchange: 'Table: selectionchange has been renamed to selection-change.',
+            cellmouseenter: 'Table: cellmouseenter has been renamed to cell-mouse-enter.',
+            cellmouseleave: 'Table: cellmouseleave has been renamed to cell-mouse-leave.',
+            cellclick: 'Table: cellclick has been renamed to cell-click.'
           }
         };
       },

src/mixins/migrating.js

@@ -22,6 +22,7 @@
 export default {
   mounted() {
     if (process.env.NODE_ENV === 'production') return;
+    if (!this.$vnode) return;
     const { props, events } = this.getMigratingConfig();
     const { data, componentOptions } = this.$vnode;
     const definedProps = data.attrs || {};

test/unit/specs/pagination.spec.js

@@ -101,7 +101,7 @@ describe('Pagination', () => {
     const vm = createVue({
       template: `
         <el-pagination
-          @currentchange="handleChange"
+          @current-change="handleChange"
           :page-size="10"
           :total="100" />
       `,
@@ -132,12 +132,12 @@ describe('Pagination', () => {
     expect(vm.page).to.equal(1);
   });
 
-  it('event:currentchange', () => {
+  it('event:current-change', () => {
     const vm = createVue({
       template: `
         <el-pagination
           :total="1000"
-          @currentchange="change = true" />
+          @current-change="change = true" />
       `,
 
       data() {
@@ -158,13 +158,13 @@ describe('Pagination', () => {
     expect(vm.change).to.true;
   });
 
-  it('event:sizechange', done => {
+  it('event:size-change', done => {
     const vm = createVue({
       template: `
         <el-pagination
           :total="100"
           layout="sizes, prev, pager, next"
-          @sizechange="trigger = true"
+          @size-change="trigger = true"
           :pageSize="10" />
       `,
 
@@ -185,7 +185,7 @@ describe('Pagination', () => {
     const vm = createVue({
       template: `
         <el-pagination
-          @currentchange="handleChange"
+          @current-change="handleChange"
           :page-size="1000"
           :total="0" />
       `,