mirror of https://github.com/ElemeFE/element
fix transitionend event compatibility
parent
46295dfd92
commit
22360be889
|
@ -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
|
||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|
||||
|
|
|
@ -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');
|
||||
});
|
||||
});
|
||||
|
|
Loading…
Reference in New Issue