mirror of
https://github.com/element-plus/element-plus.git
synced 2024-12-27 03:01:14 +08:00
2280dd5c5e
- Using `defineComponent` to wrap component up for Volar support, this should close #841 - Also made changes for some typing - Removed `merge.ts` since `Object.assign` are now supported natively
83 lines
2.4 KiB
Vue
83 lines
2.4 KiB
Vue
|
|
<template>
|
|
<transition v-on="on">
|
|
<slot></slot>
|
|
</transition>
|
|
</template>
|
|
<script lang='ts'>
|
|
import { defineComponent } from 'vue'
|
|
import { addClass, removeClass } from '@element-plus/utils/dom'
|
|
|
|
export default defineComponent({
|
|
name: 'ElCollapseTransition',
|
|
setup() {
|
|
return {
|
|
on: {
|
|
beforeEnter(el) {
|
|
addClass(el, 'collapse-transition')
|
|
if (!el.dataset) el.dataset = {}
|
|
|
|
el.dataset.oldPaddingTop = el.style.paddingTop
|
|
el.dataset.oldPaddingBottom = el.style.paddingBottom
|
|
|
|
el.style.height = '0'
|
|
el.style.paddingTop = 0
|
|
el.style.paddingBottom = 0
|
|
},
|
|
|
|
enter(el) {
|
|
el.dataset.oldOverflow = el.style.overflow
|
|
if (el.scrollHeight !== 0) {
|
|
el.style.height = el.scrollHeight + 'px'
|
|
el.style.paddingTop = el.dataset.oldPaddingTop
|
|
el.style.paddingBottom = el.dataset.oldPaddingBottom
|
|
} else {
|
|
el.style.height = ''
|
|
el.style.paddingTop = el.dataset.oldPaddingTop
|
|
el.style.paddingBottom = el.dataset.oldPaddingBottom
|
|
}
|
|
|
|
el.style.overflow = 'hidden'
|
|
},
|
|
|
|
afterEnter(el) {
|
|
// for safari: remove class then reset height is necessary
|
|
removeClass(el, 'collapse-transition')
|
|
el.style.height = ''
|
|
el.style.overflow = el.dataset.oldOverflow
|
|
},
|
|
|
|
beforeLeave(el) {
|
|
if (!el.dataset) el.dataset = {}
|
|
el.dataset.oldPaddingTop = el.style.paddingTop
|
|
el.dataset.oldPaddingBottom = el.style.paddingBottom
|
|
el.dataset.oldOverflow = el.style.overflow
|
|
|
|
el.style.height = el.scrollHeight + 'px'
|
|
el.style.overflow = 'hidden'
|
|
},
|
|
|
|
leave(el) {
|
|
if (el.scrollHeight !== 0) {
|
|
// for safari: add class after set height, or it will jump to zero height suddenly, weired
|
|
addClass(el, 'collapse-transition')
|
|
el.style.height = 0
|
|
el.style.paddingTop = 0
|
|
el.style.paddingBottom = 0
|
|
}
|
|
},
|
|
|
|
afterLeave(el) {
|
|
removeClass(el, 'collapse-transition')
|
|
el.style.height = ''
|
|
el.style.overflow = el.dataset.oldOverflow
|
|
el.style.paddingTop = el.dataset.oldPaddingTop
|
|
el.style.paddingBottom = el.dataset.oldPaddingBottom
|
|
},
|
|
},
|
|
}
|
|
},
|
|
})
|
|
</script>
|
|
|