瀏覽代碼

fix transitionend event compatibility

baiyaaaaa 8 年之前
父節點
當前提交
22360be889
共有 2 個文件被更改,包括 19 次插入10 次删除
  1. 2 2
      examples/docs/zh-CN/collapse.md
  2. 17 8
      packages/collapse/src/collapse-item.vue

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

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

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

@@ -15,12 +15,21 @@
   import { once } from 'wind-dom';
   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 {
     name: 'ElCollapseItem',
@@ -41,7 +50,7 @@
       name: {
         type: [String, Number],
         default() {
-          return uid();
+          return this._uid;
         }
       }
     },
@@ -66,7 +75,7 @@
         contentStyle.display = 'block';
         this.$nextTick(_ => {
           contentStyle.height = this.contentHeight + 'px';
-          once(contentElm, 'transitionend', () => {
+          once(contentElm, getTransitionendEvent(contentElm), () => {
             contentStyle.height = 'auto';
           });
         });
@@ -81,7 +90,7 @@
 
         this.$nextTick(_ => {
           contentStyle.height = '0';
-          once(contentElm, 'transitionend', () => {
+          once(contentElm, getTransitionendEvent(contentElm), () => {
             this.$set(this.contentStyle, 'display', 'none');
           });
         });