使用观察元素实现伸缩的下拉菜单

<script setup lang="ts">

interface Props {

title: string

list: any[]

}

defineOptions({ name: 'BaseAccordion' })

defineProps<Props>()

const isLayerOpen = ref(false)

const layerHeight = ref('0px')

const observerDomRef = ref()

const { height: observerHeight } = useElementSize(observerDomRef)

function toggerLayer() {

// 打开

if (!isLayerOpen.value) {

isLayerOpen.value = true

setTimeout(() => {

layerHeight.value = `${observerHeight.value}px`

}, 0)

} else {

layerHeight.value = '0px'

}

}

function onLayerTransitionend() {

if (layerHeight.value === '0px') isLayerOpen.value = false

}

</script>

<template>

<div>

<div class="h-40 cursor-pointer mb-16" @click="toggerLayer">

{{ title }}

</div>

<div

v-show="isLayerOpen"

class="overflow-hidden duration-[0.25s]"

:style="{ height: layerHeight }"

@transitionend="onLayerTransitionend"

>

<div ref="observerDomRef" class="overflow-hidden">

<div

v-for="item in list"

:key="item"

class="h-40 not-last-of-type:mb-10 pl-5"

>

{{ item }}

</div>

</div>

</div>

</div>

</template>

<style lang="scss" scoped></style>