bug fixes

examples/app.vue

@@ -202,7 +202,10 @@
     },
 
     watch: {
-      lang() {
+      lang(val) {
+        if (val === 'zh-CN') {
+          this.suggestJump();
+        }
         this.localize();
       }
     },
@@ -210,11 +213,28 @@
     methods: {
       localize() {
         use(this.lang === 'zh-CN' ? zhLocale : enLocale);
+      },
+      suggestJump() {
+        const href = location.href;
+        const preferGithub = localStorage.getItem('PREFER_GITHUB');
+        if (href.indexOf('element-cn') > -1 || preferGithub) return;
+        setTimeout(() => {
+          this.$confirm('建议大陆用户访问部署在国内的站点，是否跳转？', '提示')
+            .then(() => {
+              location.href = location.href.replace('element.', 'element-cn.');
+            })
+            .catch(() => {
+              localStorage.setItem('PREFER_GITHUB', true);
+            });
+        }, 1000);
       }
     },
 
     mounted() {
       this.localize();
+      if (this.lang === 'zh-CN') {
+        this.suggestJump();
+      }
       setTimeout(() => {
         const notified = localStorage.getItem('RELEASE_NOTIFIED');
         if (!notified) {

examples/docs/zh-CN/table.md

@@ -298,10 +298,10 @@
         return row.tag === value;
       },
 
-      tableRowClassName({row, rowndex}) {
-        if (rowndex === 1) {
+      tableRowClassName({row, rowIndex}) {
+        if (rowIndex === 1) {
           return 'warning-row';
-        } else if (rowndex === 3) {
+        } else if (rowIndex === 3) {
           return 'success-row';
         }
         return '';

packages/date-picker/src/basic/time-spinner.vue

@@ -3,6 +3,7 @@
     <template v-if="!arrowControl">
       <el-scrollbar
         @mouseenter.native="emitSelectRange('hours')"
+        @mousemove.native="adjustCurrentSpinner('hours')"
         class="el-time-spinner__wrapper"
         wrap-style="max-height: inherit;"
         view-class="el-time-spinner__list"
@@ -18,6 +19,7 @@
       </el-scrollbar>
       <el-scrollbar
         @mouseenter.native="emitSelectRange('minutes')"
+        @mousemove.native="adjustCurrentSpinner('minutes')"
         class="el-time-spinner__wrapper"
         wrap-style="max-height: inherit;"
         view-class="el-time-spinner__list"
@@ -33,6 +35,7 @@
       <el-scrollbar
         v-show="showSeconds"
         @mouseenter.native="emitSelectRange('seconds')"
+        @mousemove.native="adjustCurrentSpinner('seconds')"
         class="el-time-spinner__wrapper"
         wrap-style="max-height: inherit;"
         view-class="el-time-spinner__list"
@@ -196,16 +199,10 @@
       emitSelectRange(type) {
         if (type === 'hours') {
           this.$emit('select-range', 0, 2);
-          this.adjustSpinner('minutes', this.minutes);
-          this.adjustSpinner('seconds', this.seconds);
         } else if (type === 'minutes') {
           this.$emit('select-range', 3, 5);
-          this.adjustSpinner('hours', this.hours);
-          this.adjustSpinner('seconds', this.seconds);
         } else if (type === 'seconds') {
           this.$emit('select-range', 6, 8);
-          this.adjustSpinner('minutes', this.minutes);
-          this.adjustSpinner('hours', this.hours);
         }
         this.currentScrollbar = type;
       },
@@ -237,6 +234,10 @@
         this.adjustSpinner('seconds', this.seconds);
       },
 
+      adjustCurrentSpinner(type) {
+        this.adjustSpinner(type, this[type]);
+      },
+
       adjustSpinner(type, value) {
         if (this.arrowControl) return;
         const el = this.$refs[type].wrap;

packages/date-picker/src/panel/date-range.vue

@@ -89,19 +89,19 @@
                 @click="leftPrevMonth"
                 class="el-picker-panel__icon-btn el-icon-arrow-left"></button>
               <button
-                  type="button"
-                  @click="leftNextYear"
-                  v-if="unlinkPanels"
-                  :disabled="!enableYearArrow"
-                  :class="{ 'is-disabled': !enableYearArrow }"
-                  class="el-picker-panel__icon-btn el-icon-d-arrow-right"></button>
+                type="button"
+                @click="leftNextYear"
+                v-if="unlinkPanels"
+                :disabled="!enableYearArrow"
+                :class="{ 'is-disabled': !enableYearArrow }"
+                class="el-picker-panel__icon-btn el-icon-d-arrow-right"></button>
               <button
-                  type="button"
-                  @click="leftNextMonth"
-                  v-if="unlinkPanels"
-                  :disabled="!enableMonthArrow"
-                  :class="{ 'is-disabled': !enableMonthArrow }"
-                  class="el-picker-panel__icon-btn el-icon-arrow-right"></button>
+                type="button"
+                @click="leftNextMonth"
+                v-if="unlinkPanels"
+                :disabled="!enableMonthArrow"
+                :class="{ 'is-disabled': !enableMonthArrow }"
+                class="el-picker-panel__icon-btn el-icon-arrow-right"></button>
               <div>{{ leftLabel }}</div>
             </div>
             <date-table
@@ -120,19 +120,19 @@
           <div class="el-picker-panel__content el-date-range-picker__content is-right">
             <div class="el-date-range-picker__header">
               <button
-                  type="button"
-                  @click="rightPrevYear"
-                  v-if="unlinkPanels"
-                  :disabled="!enableYearArrow"
-                  :class="{ 'is-disabled': !enableYearArrow }"
-                  class="el-picker-panel__icon-btn el-icon-d-arrow-left"></button>
+                type="button"
+                @click="rightPrevYear"
+                v-if="unlinkPanels"
+                :disabled="!enableYearArrow"
+                :class="{ 'is-disabled': !enableYearArrow }"
+                class="el-picker-panel__icon-btn el-icon-d-arrow-left"></button>
               <button
-                  type="button"
-                  @click="rightPrevMonth"
-                  v-if="unlinkPanels"
-                  :disabled="!enableMonthArrow"
-                  :class="{ 'is-disabled': !enableMonthArrow }"
-                  class="el-picker-panel__icon-btn el-icon-arrow-left"></button>
+                type="button"
+                @click="rightPrevMonth"
+                v-if="unlinkPanels"
+                :disabled="!enableMonthArrow"
+                :class="{ 'is-disabled': !enableMonthArrow }"
+                class="el-picker-panel__icon-btn el-icon-arrow-left"></button>
               <button
                 type="button"
                 @click="rightNextYear"
@@ -336,7 +336,6 @@
         if (val && this.$refs.minTimePicker) {
           this.$refs.minTimePicker.date = val;
           this.$refs.minTimePicker.value = val;
-          this.$refs.minTimePicker.adjustSpinners();
         }
       },
 
@@ -344,7 +343,6 @@
         if (val && this.$refs.maxTimePicker) {
           this.$refs.maxTimePicker.date = val;
           this.$refs.maxTimePicker.value = val;
-          this.$refs.maxTimePicker.adjustSpinners();
         }
       },
 

packages/date-picker/src/panel/time-range.vue

@@ -135,9 +135,6 @@
             this.maxDate = advanceTime(new Date(), 60 * 60 * 1000);
           }
         }
-        if (this.visible) {
-          this.$nextTick(_ => this.adjustSpinners());
-        }
       },
 
       visible(val) {

packages/date-picker/src/panel/time.vue

@@ -51,6 +51,8 @@
         if (val) {
           this.oldValue = this.value;
           this.$nextTick(() => this.$refs.spinner.emitSelectRange('hours'));
+        } else {
+          this.needInitAdjust = true;
         }
       },
 
@@ -63,8 +65,9 @@
         }
 
         this.date = date;
-        if (this.visible) {
+        if (this.visible && this.needInitAdjust) {
           this.$nextTick(_ => this.adjustSpinners());
+          this.needInitAdjust = false;
         }
       },
 
@@ -90,7 +93,8 @@
         selectableRange: [],
         selectionRange: [0, 2],
         disabled: false,
-        arrowControl: false
+        arrowControl: false,
+        needInitAdjust: true
       };
     },
 

packages/pagination/src/pagination.js

@@ -3,6 +3,7 @@ import ElSelect from 'element-ui/packages/select';
 import ElOption from 'element-ui/packages/option';
 import ElInput from 'element-ui/packages/input';
 import Locale from 'element-ui/src/mixins/locale';
+import { valueEquals } from 'element-ui/src/utils/util';
 
 export default {
   name: 'ElPagination',
@@ -147,9 +148,10 @@ export default {
       watch: {
         pageSizes: {
           immediate: true,
-          handler(value) {
-            if (Array.isArray(value)) {
-              this.$parent.internalPageSize = value.indexOf(this.$parent.pageSize) > -1
+          handler(newVal, oldVal) {
+            if (valueEquals(newVal, oldVal)) return;
+            if (Array.isArray(newVal)) {
+              this.$parent.internalPageSize = newVal.indexOf(this.$parent.pageSize) > -1
                 ? this.$parent.pageSize
                 : this.pageSizes[0];
             }
@@ -179,8 +181,7 @@ export default {
 
       components: {
         ElSelect,
-        ElOption,
-        ElInput
+        ElOption
       },
 
       methods: {
@@ -202,6 +203,8 @@ export default {
         };
       },
 
+      components: { ElInput },
+
       methods: {
         handleFocus(event) {
           this.oldValue = event.target.value;

packages/select/src/select.vue

@@ -114,6 +114,7 @@
   import { t } from 'element-ui/src/locale';
   import scrollIntoView from 'element-ui/src/utils/scroll-into-view';
   import { getValueByPath } from 'element-ui/src/utils/util';
+  import { valueEquals } from 'element-ui/src/utils/util';
   import NavigationMixin from './navigation-mixin';
 
   const sizeMap = {
@@ -122,18 +123,6 @@
     'mini': 28
   };
 
-  const valueEquals = (a, b) => {
-    // see: https://stackoverflow.com/questions/3115982/how-to-check-if-two-arrays-are-equal-with-javascript
-    if (a === b) return true;
-    if (!(a instanceof Array)) return false;
-    if (!(b instanceof Array)) return false;
-    if (a.length !== b.length) return false;
-    for (let i = 0; i !== a.length; ++i) {
-      if (a[i] !== b[i]) return false;
-    }
-    return true;
-  };
-
   export default {
     mixins: [Emitter, Locale, Focus('reference'), NavigationMixin],
 

packages/theme-chalk/src/autocomplete.scss

@@ -3,6 +3,7 @@
 @import "common/var";
 @import "./input.scss";
 @import "./scrollbar.scss";
+@import "./popper";
 
 @include b(autocomplete) {
   position: relative;

packages/theme-chalk/src/cascader.scss

@@ -1,6 +1,7 @@
 @import "mixins/mixins";
-@import "./input.scss";
 @import "common/var";
+@import "./input.scss";
+@import "./popper";
 
 @include b(cascader) {
   display: inline-block;

packages/theme-chalk/src/date-picker.scss

@@ -8,4 +8,5 @@
 @import "./date-picker/time-range-picker.scss";
 @import "./date-picker/time-picker.scss";
 @import "./input.scss";
-@import "./scrollbar.scss";
+@import "./scrollbar.scss";
+@import "./popper";

packages/theme-chalk/src/dropdown.scss

@@ -1,6 +1,7 @@
 @import "mixins/mixins";
 @import "common/var";
 @import "button";
+@import "./popper";
 
 @include b(dropdown) {
   display: inline-block;

packages/theme-chalk/src/popover.scss

@@ -1,5 +1,6 @@
 @import "mixins/mixins";
 @import "common/var";
+@import "./popper";
 
 @include b(popover) {
   position: absolute;
@@ -27,102 +28,3 @@
     margin-bottom: 12px;
   }
 }
-
-@include b(popper) {
-  .popper__arrow,
-  .popper__arrow::after {
-    position: absolute;
-    display: block;
-    width: 0;
-    height: 0;
-    border-color: transparent;
-    border-style: solid;
-  }
-
-  .popper__arrow {
-    border-width: $--popover-arrow-size;
-    filter: drop-shadow(0 2px 12px rgba(0, 0, 0, 0.03))
-  }
-
-  .popper__arrow::after {
-    content: " ";
-    border-width: $--popover-arrow-size;
-  }
-
-  &[x-placement^="top"] {
-    margin-bottom: #{$--popover-arrow-size + 6};
-  }
-
-  &[x-placement^="top"] .popper__arrow {
-    bottom: -$--popover-arrow-size;
-    left: 50%;
-    margin-right: #{$--tooltip-arrow-size / 2};
-    border-top-color: $--popover-border-color;
-    border-bottom-width: 0;
-
-    &::after {
-      bottom: 1px;
-      margin-left: -$--popover-arrow-size;
-      border-top-color: $--popover-fill;
-      border-bottom-width: 0;
-    }
-  }
-
-  &[x-placement^="bottom"] {
-    margin-top: #{$--popover-arrow-size + 6};
-  }
-
-  &[x-placement^="bottom"] .popper__arrow {
-    top: -$--popover-arrow-size;
-    left: 50%;
-    margin-right: #{$--tooltip-arrow-size / 2};
-    border-top-width: 0;
-    border-bottom-color: $--popover-border-color;
-
-    &::after {
-      top: 1px;
-      margin-left: -$--popover-arrow-size;
-      border-top-width: 0;
-      border-bottom-color: $--popover-fill;
-    }
-  }
-
-  &[x-placement^="right"] {
-    margin-left: #{$--popover-arrow-size + 6};
-  }
-
-  &[x-placement^="right"] .popper__arrow {
-    top: 50%;
-    left: -$--popover-arrow-size;
-    margin-bottom: #{$--tooltip-arrow-size / 2};
-    border-right-color: $--popover-border-color;
-    border-left-width: 0;
-
-    &::after {
-      bottom: -$--popover-arrow-size;
-      left: 1px;
-      border-right-color: $--popover-fill;
-      border-left-width: 0;
-    }
-  }
-
-  &[x-placement^="left"] {
-    margin-right: #{$--popover-arrow-size + 6};
-  }
-
-  &[x-placement^="left"] .popper__arrow {
-    top: 50%;
-    right: -$--popover-arrow-size;
-    margin-bottom: #{$--tooltip-arrow-size / 2};
-    border-right-width: 0;
-    border-left-color: $--popover-border-color;
-
-    &::after {
-      right: 1px;
-      bottom: -$--popover-arrow-size;
-      margin-left: -$--popover-arrow-size;
-      border-right-width: 0;
-      border-left-color: $--popover-fill;
-    }
-  }
-}

packages/theme-chalk/src/popper.scss

@@ -0,0 +1,101 @@
+@import "mixins/mixins";
+@import "common/var";
+
+@include b(popper) {
+  .popper__arrow,
+  .popper__arrow::after {
+    position: absolute;
+    display: block;
+    width: 0;
+    height: 0;
+    border-color: transparent;
+    border-style: solid;
+  }
+
+  .popper__arrow {
+    border-width: $--popover-arrow-size;
+    filter: drop-shadow(0 2px 12px rgba(0, 0, 0, 0.03))
+  }
+
+  .popper__arrow::after {
+    content: " ";
+    border-width: $--popover-arrow-size;
+  }
+
+  &[x-placement^="top"] {
+    margin-bottom: #{$--popover-arrow-size + 6};
+  }
+
+  &[x-placement^="top"] .popper__arrow {
+    bottom: -$--popover-arrow-size;
+    left: 50%;
+    margin-right: #{$--tooltip-arrow-size / 2};
+    border-top-color: $--popover-border-color;
+    border-bottom-width: 0;
+
+    &::after {
+      bottom: 1px;
+      margin-left: -$--popover-arrow-size;
+      border-top-color: $--popover-fill;
+      border-bottom-width: 0;
+    }
+  }
+
+  &[x-placement^="bottom"] {
+    margin-top: #{$--popover-arrow-size + 6};
+  }
+
+  &[x-placement^="bottom"] .popper__arrow {
+    top: -$--popover-arrow-size;
+    left: 50%;
+    margin-right: #{$--tooltip-arrow-size / 2};
+    border-top-width: 0;
+    border-bottom-color: $--popover-border-color;
+
+    &::after {
+      top: 1px;
+      margin-left: -$--popover-arrow-size;
+      border-top-width: 0;
+      border-bottom-color: $--popover-fill;
+    }
+  }
+
+  &[x-placement^="right"] {
+    margin-left: #{$--popover-arrow-size + 6};
+  }
+
+  &[x-placement^="right"] .popper__arrow {
+    top: 50%;
+    left: -$--popover-arrow-size;
+    margin-bottom: #{$--tooltip-arrow-size / 2};
+    border-right-color: $--popover-border-color;
+    border-left-width: 0;
+
+    &::after {
+      bottom: -$--popover-arrow-size;
+      left: 1px;
+      border-right-color: $--popover-fill;
+      border-left-width: 0;
+    }
+  }
+
+  &[x-placement^="left"] {
+    margin-right: #{$--popover-arrow-size + 6};
+  }
+
+  &[x-placement^="left"] .popper__arrow {
+    top: 50%;
+    right: -$--popover-arrow-size;
+    margin-bottom: #{$--tooltip-arrow-size / 2};
+    border-right-width: 0;
+    border-left-color: $--popover-border-color;
+
+    &::after {
+      right: 1px;
+      bottom: -$--popover-arrow-size;
+      margin-left: -$--popover-arrow-size;
+      border-right-width: 0;
+      border-left-color: $--popover-fill;
+    }
+  }
+}

packages/theme-chalk/src/select-dropdown.scss

@@ -1,5 +1,6 @@
 @import "mixins/mixins";
 @import "common/var";
+@import "./popper";
 
 @include b(select-dropdown) {
   position: absolute;

packages/theme-chalk/src/time-picker.scss

@@ -3,3 +3,4 @@
 @import "./date-picker/time-picker.scss";
 @import "./input.scss";
 @import "./scrollbar.scss";
+@import "./popper";

packages/theme-chalk/src/time-select.scss

@@ -1,7 +1,8 @@
+@import "common/var";
 @import "./date-picker/picker.scss";
 @import "./date-picker/date-picker.scss";
-@import "common/var";
 @import "./scrollbar.scss";
+@import "./popper";
 
 .time-select {
   margin: 5px 0;

src/utils/util.js

@@ -71,3 +71,14 @@ export const generateId = function() {
   return Math.floor(Math.random() * 10000);
 };
 
+export const valueEquals = (a, b) => {
+  // see: https://stackoverflow.com/questions/3115982/how-to-check-if-two-arrays-are-equal-with-javascript
+  if (a === b) return true;
+  if (!(a instanceof Array)) return false;
+  if (!(b instanceof Array)) return false;
+  if (a.length !== b.length) return false;
+  for (let i = 0; i !== a.length; ++i) {
+    if (a[i] !== b[i]) return false;
+  }
+  return true;
+};