mirror of https://github.com/ElemeFE/element
fix transitionend event compatibility
parent
46295dfd92
commit
22360be889
|
@ -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
|
||||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|
||||||
|
|
|
@ -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 getTransitionendEvent(el) {
|
||||||
function S4() {
|
let t;
|
||||||
return (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1);
|
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');
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
Loading…
Reference in New Issue