mirror/element-plus
2
0
Fork 0
mirror of https://github.com/element-plus/element-plus.git synced 2025-01-24 11:05:17 +08:00
Code Issues Packages Projects Releases Wiki Activity

refactor(components): [collapse-transition] switch to script-setup syntax (#7953)

Browse Source
This commit is contained in:
류한경 2022-05-29 04:51:06 +09:00 committed by GitHub
parent 0c2f5bc56f
commit ca658915dd
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 51 additions and 56 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

107
packages/components/collapse-transition/src/collapse-transition.vue
View File

@ -3,75 +3,70 @@
<slot />
</transition>
</template>
<script lang="ts">
import { defineComponent } from 'vue'
<script lang="ts" setup>
import { useNamespace } from '@element-plus/hooks'
export default defineComponent({
defineOptions({
name: 'ElCollapseTransition',
setup() {
const ns = useNamespace('collapse-transition')
})
return {
ns,
on: {
beforeEnter(el) {
if (!el.dataset) el.dataset = {}
const ns = useNamespace('collapse-transition')
el.dataset.oldPaddingTop = el.style.paddingTop
el.dataset.oldPaddingBottom = el.style.paddingBottom
const on = {
beforeEnter(el) {
if (!el.dataset) el.dataset = {}
el.style.maxHeight = 0
el.style.paddingTop = 0
el.style.paddingBottom = 0
},
el.dataset.oldPaddingTop = el.style.paddingTop
el.dataset.oldPaddingBottom = el.style.paddingBottom
enter(el) {
el.dataset.oldOverflow = el.style.overflow
if (el.scrollHeight !== 0) {
el.style.maxHeight = `${el.scrollHeight}px`
el.style.paddingTop = el.dataset.oldPaddingTop
el.style.paddingBottom = el.dataset.oldPaddingBottom
} else {
el.style.maxHeight = 0
el.style.paddingTop = el.dataset.oldPaddingTop
el.style.paddingBottom = el.dataset.oldPaddingBottom
}
el.style.maxHeight = 0
el.style.paddingTop = 0
el.style.paddingBottom = 0
},
el.style.overflow = 'hidden'
},
enter(el) {
el.dataset.oldOverflow = el.style.overflow
if (el.scrollHeight !== 0) {
el.style.maxHeight = `${el.scrollHeight}px`
el.style.paddingTop = el.dataset.oldPaddingTop
el.style.paddingBottom = el.dataset.oldPaddingBottom
} else {
el.style.maxHeight = 0
el.style.paddingTop = el.dataset.oldPaddingTop
el.style.paddingBottom = el.dataset.oldPaddingBottom
}
afterEnter(el) {
el.style.maxHeight = ''
el.style.overflow = el.dataset.oldOverflow
},
el.style.overflow = 'hidden'
},
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
afterEnter(el) {
el.style.maxHeight = ''
el.style.overflow = el.dataset.oldOverflow
},
el.style.maxHeight = `${el.scrollHeight}px`
el.style.overflow = 'hidden'
},
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
leave(el) {
if (el.scrollHeight !== 0) {
el.style.maxHeight = 0
el.style.paddingTop = 0
el.style.paddingBottom = 0
}
},
el.style.maxHeight = `${el.scrollHeight}px`
el.style.overflow = 'hidden'
},
afterLeave(el) {
el.style.maxHeight = ''
el.style.overflow = el.dataset.oldOverflow
el.style.paddingTop = el.dataset.oldPaddingTop
el.style.paddingBottom = el.dataset.oldPaddingBottom
},
},
leave(el) {
if (el.scrollHeight !== 0) {
el.style.maxHeight = 0
el.style.paddingTop = 0
el.style.paddingBottom = 0
}
},
})
afterLeave(el) {
el.style.maxHeight = ''
el.style.overflow = el.dataset.oldOverflow
el.style.paddingTop = el.dataset.oldPaddingTop
el.style.paddingBottom = el.dataset.oldPaddingBottom
},
}
</script>