鼠标进入和离开时，展示和隐藏的元素

<template>
  <div
    :class="{ 'nav-box': true, 'nav-box-hover': state.showNavBoxHover }"
    :style="{ height: state.navBoxHeight + 'px' }"
    @mouseenter="handleMouseEnter"
    @mouseleave="handleMouseOut"
  >
    <ul ref="ulRef">
      <li v-for="i in 10" :key="i">{{ i }}</li>
    </ul>
    <!-- 当ul的高度大于外层div的高度60时，展示隐藏的元素 -->
    <el-icon class="i-down" v-if="state.ulHeight > 60"><ArrowDown /></el-icon>
    <el-icon class="i-up" v-if="state.ulHeight > 60"><ArrowUp /></el-icon>
  </div>
</template>
<script setup>
import { onMounted, ref, reactive } from 'vue'
const ulRef = ref()
const state = reactive({
  showNavBoxHover: false,
  navBoxHeight: '60',
  ulHeight: ''
})
// 鼠标进入div时，添加类和样式
const handleMouseEnter = () => {
  if (state.ulHeight > '60') {
    state.showNavBoxHover = true
    state.navBoxHeight = state.ulHeight
  }
}
// 鼠标离开div时，去除类和样式
const handleMouseOut = () => {
  state.showNavBoxHover = false
  state.navBoxHeight = '60'
}
onMounted(() => {
  // 获取ul的高度
  state.ulHeight = ulRef.value.clientHeight
})
</script>
<style scoped lang="less">
.nav-box {
  box-sizing: border-box;
  position: relative;
  width: 500px;
  transition: height 0.3s;
  overflow: hidden;
  background-color: #ccc;
  margin: 0 auto;
  cursor: pointer;

  ul {
    box-sizing: border-box;
    margin: 0;
    padding: 0 20px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    li {
      font-size: 20px;
      box-sizing: border-box;
      list-style: none;
      padding: 0 18px;
      height: 60px;
      line-height: 60px;
    }
  }
  .i-up,
  .i-down {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 0px;
    background: #f5f6f7;
    border-top-left-radius: 20%;
    border-top-right-radius: 20%;
    width: 60px;
  }
  .i-up {
    display: none;
  }
}
.nav-box-hover {
  .i-up {
    display: flex;
  }
  .i-down {
    display: none;
  }
}
</style>