Ver código fonte

fix transitionend event compatibility

baiyaaaaa 8 anos atrás
pai
commit
22360be889

+ 2 - 2
examples/docs/zh-CN/collapse.md

@@ -136,12 +136,12 @@
 | 参数      | 说明          | 类型      | 可选值                           | 默认值  |
 | 参数      | 说明          | 类型      | 可选值                           | 默认值  |
 |---------- |-------------- |---------- |--------------------------------  |-------- |
 |---------- |-------------- |---------- |--------------------------------  |-------- |
 | accordion | 是否手风琴模式 | boolean | — | false |
 | accordion | 是否手风琴模式 | boolean | — | false |
-| value | 当前激活的面板 | string/array | — | — |
+| value | 当前激活的面板(如果是手风琴模式,绑定值类型需要为`string`,否则为`array`) | string/array | — | — |
 
 
 ### Collapse Events
 ### Collapse Events
 | 事件名称 | 说明 | 回调参数 |
 | 事件名称 | 说明 | 回调参数 |
 |---------|---------|---------|
 |---------|---------|---------|
-| change | 当前激活面板改变时触发 | (activeNames: array) |
+| change | 当前激活面板改变时触发(如果是手风琴模式,参数 `activeNames` 类型为`string`,否则为`array`) | (activeNames: array\|array) |
 
 
 ### Collapse Item Attributes
 ### Collapse Item Attributes
 | 参数      | 说明          | 类型      | 可选值                           | 默认值  |
 | 参数      | 说明          | 类型      | 可选值                           | 默认值  |

+ 17 - 8
packages/collapse/src/collapse-item.vue

@@ -15,12 +15,21 @@
   import { once } from 'wind-dom';
   import { once } from 'wind-dom';
   import Emitter from 'element-ui/src/mixins/emitter';
   import Emitter from 'element-ui/src/mixins/emitter';
 
 
-  function uid() {
-    function S4() {
-      return (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1);
+  function getTransitionendEvent(el) {
+    let t;
+    let transitions = {
+      'transition': 'transitionend',
+      'OTransition': 'oTransitionEnd',
+      'MozTransition': 'transitionend',
+      'WebkitTransition': 'webkitTransitionEnd'
+    };
+
+    for (t in transitions) {
+      if (el.style[t] !== undefined) {
+        return transitions[t];
+      }
     }
     }
-    return `${S4()}${S4()}-${S4()}-${S4()}-${S4()}-${S4()}${S4()}${S4()}`;
-  }
+  };
 
 
   export default {
   export default {
     name: 'ElCollapseItem',
     name: 'ElCollapseItem',
@@ -41,7 +50,7 @@
       name: {
       name: {
         type: [String, Number],
         type: [String, Number],
         default() {
         default() {
-          return uid();
+          return this._uid;
         }
         }
       }
       }
     },
     },
@@ -66,7 +75,7 @@
         contentStyle.display = 'block';
         contentStyle.display = 'block';
         this.$nextTick(_ => {
         this.$nextTick(_ => {
           contentStyle.height = this.contentHeight + 'px';
           contentStyle.height = this.contentHeight + 'px';
-          once(contentElm, 'transitionend', () => {
+          once(contentElm, getTransitionendEvent(contentElm), () => {
             contentStyle.height = 'auto';
             contentStyle.height = 'auto';
           });
           });
         });
         });
@@ -81,7 +90,7 @@
 
 
         this.$nextTick(_ => {
         this.$nextTick(_ => {
           contentStyle.height = '0';
           contentStyle.height = '0';
-          once(contentElm, 'transitionend', () => {
+          once(contentElm, getTransitionendEvent(contentElm), () => {
             this.$set(this.contentStyle, 'display', 'none');
             this.$set(this.contentStyle, 'display', 'none');
           });
           });
         });
         });