mirror of https://github.com/ElemeFE/element
use collapse transition in collapse
parent
1a8ee76c78
commit
d96b585363
|
@ -4,32 +4,18 @@
|
||||||
<i class="el-collapse-item__header__arrow el-icon-arrow-right"></i>
|
<i class="el-collapse-item__header__arrow el-icon-arrow-right"></i>
|
||||||
<slot name="title">{{title}}</slot>
|
<slot name="title">{{title}}</slot>
|
||||||
</div>
|
</div>
|
||||||
<div class="el-collapse-item__wrap" ref="contentWrap">
|
<collapse-transition>
|
||||||
<div class="el-collapse-item__content" ref="content">
|
<div class="el-collapse-item__wrap" v-show="isActive">
|
||||||
<slot></slot>
|
<div class="el-collapse-item__content">
|
||||||
|
<slot></slot>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</collapse-transition>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<script>
|
<script>
|
||||||
import { once } from 'element-ui/src/utils/dom';
|
|
||||||
import Emitter from 'element-ui/src/mixins/emitter';
|
import Emitter from 'element-ui/src/mixins/emitter';
|
||||||
|
import CollapseTransition from 'element-ui/src/transitions/collapse-transition';
|
||||||
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];
|
|
||||||
}
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'ElCollapseItem',
|
name: 'ElCollapseItem',
|
||||||
|
@ -38,6 +24,10 @@
|
||||||
|
|
||||||
mixins: [Emitter],
|
mixins: [Emitter],
|
||||||
|
|
||||||
|
components: {
|
||||||
|
CollapseTransition
|
||||||
|
},
|
||||||
|
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
contentWrapStyle: {
|
contentWrapStyle: {
|
||||||
|
@ -66,57 +56,16 @@
|
||||||
|
|
||||||
watch: {
|
watch: {
|
||||||
'isActive'(value) {
|
'isActive'(value) {
|
||||||
value ? this.open() : this.close();
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
methods: {
|
methods: {
|
||||||
open() {
|
|
||||||
const contentWrapElm = this.$refs.contentWrap;
|
|
||||||
const contentHeight = this.contentHeight;
|
|
||||||
|
|
||||||
contentWrapElm.style.display = 'block';
|
|
||||||
contentWrapElm.style.height = '0';
|
|
||||||
|
|
||||||
setTimeout(_ => {
|
|
||||||
contentWrapElm.style.height = contentHeight + 'px';
|
|
||||||
once(contentWrapElm, getTransitionendEvent(contentWrapElm), () => {
|
|
||||||
if (!this.isActive) return;
|
|
||||||
contentWrapElm.style.height = 'auto';
|
|
||||||
});
|
|
||||||
}, 10);
|
|
||||||
},
|
|
||||||
close() {
|
|
||||||
const contentWrapElm = this.$refs.contentWrap;
|
|
||||||
const contentElm = this.$refs.content;
|
|
||||||
const contentHeight = contentElm.offsetHeight;
|
|
||||||
|
|
||||||
this.contentHeight = contentHeight;
|
|
||||||
contentWrapElm.style.height = contentHeight + 'px';
|
|
||||||
|
|
||||||
setTimeout(_ => {
|
|
||||||
contentWrapElm.style.height = '0';
|
|
||||||
once(contentWrapElm, getTransitionendEvent(contentWrapElm), () => {
|
|
||||||
if (this.isActive) return;
|
|
||||||
contentWrapElm.style.display = 'none';
|
|
||||||
});
|
|
||||||
}, 10);
|
|
||||||
},
|
|
||||||
init() {
|
|
||||||
if (!this.isActive) {
|
|
||||||
let contentWrapElm = this.$refs.contentWrap;
|
|
||||||
this.contentHeight = this.$refs.content.offsetHeight;
|
|
||||||
contentWrapElm.style.height = '0';
|
|
||||||
contentWrapElm.style.display = 'none';
|
|
||||||
}
|
|
||||||
},
|
|
||||||
handleHeaderClick() {
|
handleHeaderClick() {
|
||||||
this.dispatch('ElCollapse', 'item-click', this);
|
this.dispatch('ElCollapse', 'item-click', this);
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
mounted() {
|
mounted() {
|
||||||
this.init();
|
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
Loading…
Reference in New Issue