vue+elementUI+transition实现鼠标滑过div展开内容，鼠标划出收起内容，加防抖功能

---

一、场景

这两天做项目，此产品提出需求 要求详情页的顶部区域要在鼠标划入后展开里面的内容，鼠标划出要收起部分内容，详情底部的内容高度要自适应，我这里运用了鼠标事件+transition实现，加上lodash debounce进行防抖，下面是具体实现代码

二、实现代码

1.子组件代码结构

代码如下（示例）：

<template><divclass="project-header"@mouseenter="enterFun()"@mouseleave="leaveFun()"ref="project-header"><div class="project-header-top">顶部要显示的部分</div><div class="bottom" v-show="showProjectHeaderBottom">顶部要隐藏的部分，鼠标划入显示</div></div>
</template><script>
import { debounce } from 'lodash';//npm install lodash引入
export default {name: '',components: {},props: {},data() {return {showProjectHeaderBottom: false,//控制顶部要隐藏的显隐};},methods: {// 鼠标滑过enterFun:debounce(function(){this.showProjectHeaderBottom = true;this.$emit('getHeight', 'hover');},100),// 鼠标划出leaveFun:debounce(function(){this.showProjectHeaderBottom = false;this.$emit('getHeight', null);},100),},
};
</script>
<style lang="scss" scoped>
.project-header {height: 68px;
}
</style>

2.父组件

代码如下（示例）：

<template><div class="project-detail" ref="project-browse" ><Headerref="project-detail-top"class="project-detail-top"@getHeight="getHeight"></Header><div class="tab-content" style="position: relative" ref="tab-content"></div></div>
</template><script>
import Header from './components/detailHeader.vue';
export default {name: '',components: {  Header},props: {},data() {},methods: {mountedInit() {this.getHeaderheight();window.addEventListener('resize', this.getHeaderheight);},getHeaderheight(type) {this.$nextTick(() => {let projectHeader = type === 'hover' ? 208 : 60;document.querySelector('.tab-content .el-tabs__content').style.overflow = type === 'hover' ? 'hidden' : 'auto';let height = this.$refs['project-browse']?.offsetHeight - projectHeader;this.$refs['tab-content'].style.height = height + 'px';//自适应this.$refs["project-detail-top"].$el.style.height=projectHeader+ 'px';});},},created() {this.createdInit();},mounted() {this.mountedInit();},
};
</script>
<style lang="scss" scoped>
.project-detail-top {transition: height 0.2s ease-in-out;overflow: hidden;
}
</style>

---