【Vue3】实现一个超过高度后可控制显示隐藏的组件

组件效果图

• 未达到最大高度

• 达到设置的最大高度
  
• 进行展开
  

实现代码

• 组件代码

备注：通过tailwindcss设置的样式，通过@element-plus/icons-vue设置的图标，可根据情况进行替换

<template><!-- 限制高度组件 --><div ref="restrictionBox" class="relative overflow-hidden bg-blue-300" :class="control.isUnfold ? '' : max"><div ref="restrictionChil"><slot></slot></div><!-- 渐变 --><div v-if="control.isExceed && !control.isUnfold" class="absolute inset-x-0 bottom-0 h-12 bg-gradient-to-t from-white"></div></div><!-- 控制按钮 --><div v-if="control.isExceed"><div class="flex h-12 cursor-pointer select-none items-center justify-center space-x-1 pb-2 text-blue-500 active:text-blue-400" @click="changeUnfold"><span class="text-sm">{{ control.isUnfold ? '收起' : '展开' }}</span><el-icon><ArrowUp v-if="control.isUnfold" /><ArrowDown v-else /></el-icon></div></div>
</template><script setup>
import { ref, reactive, onMounted, onUnmounted } from 'vue'
import { ArrowUp, ArrowDown } from '@element-plus/icons-vue'// 接收参数
const props = defineProps({// 最大高度 - 收起前max: {type: String,default: 'max-h-48'}
})// 组件控制参数
const control = reactive({boxHeight: 0,chilHeight: 0,isExceed: false, // 是否超出高度isUnfold: false // 是否展开
})// 改变展开方式
const changeUnfold = () => (control.isUnfold = !control.isUnfold)// 获取元素
const restrictionBox = ref(null)
const restrictionChil = ref(null)// 创建高度监听 及监听销毁
let observerBox = null
let observerChil = null// 销毁监听
const destroyedObserver = () => {if (observerBox) {observerBox.disconnect()observerBox = null}if (observerChil) {observerChil.disconnect()observerChil = null}
}// 比较高度的函数
const compareHeights = () => {if (control.boxHeight > 0 && control.chilHeight > 0) {// 高度超出,出现下拉if (control.chilHeight > control.boxHeight) {destroyedObserver()console.log('超出高度')control.isExceed = true}}
}// 页面加载完成
onMounted(() => {// 父级监听observerBox = new ResizeObserver(entries => {entries.forEach(entry => {control.boxHeight = entry.contentRect.heightcompareHeights()})})// 内容监听observerChil = new ResizeObserver(entries => {entries.forEach(entry => {control.chilHeight = entry.contentRect.heightcompareHeights()})})// 开始监听两个元素observerBox.observe(restrictionBox.value)observerChil.observe(restrictionChil.value)
})
onUnmounted(() => {destroyedObserver()
})
</script>

外层引用

<script setup>
import HeightRestriction from '../../components/HeightRestriction/HeightRestriction.vue'const ttt1 = ref(0)
const tttt = () => {ttt1.value++
}
</script><template><HeightRestriction><button @click="tttt">测试</button><div v-for="i in ttt1" :key="i">{{ 'ttt1ttt1ttt1' }}</div></HeightRestriction>
</template>