Element Plus-Collapse 折叠面板悬浮显示首先先看Element Plus官网中的折叠面板折叠是通过按

首先先看Element Plus官网中的折叠面板折叠是通过按钮控制的，但是主包想要悬浮展开，鼠标离开时关闭，先看Element Plus官网的源码和实现效果

那么直接从控制折叠的按钮入手，也就是el-radio-button,通过 v-model="isCollapse" 实现双向数据绑定，将选中状态与 isCollapse 变量关联,当用户点击某个单选按钮时，isCollapse 变量会自动更新为对应的值（true 或 false），从而控制是否折叠。

我的做法是直接删掉按钮，换成鼠标事件@mouseenter和@mouseleave控制状态控制isCollapse 变量，顺便用三联运算符改了一下侧边栏宽度的控制，这样后期方便改动

另外还添加了过渡效果，更加丝滑

完整代码组件如下，可直接食用：

<template>
  <el-aside
     :width="isCollapse ? '64px' : '200px'"
     class="aside-container"
     @mouseenter="isCollapse = false"
     @mouseleave="isCollapse = true"
   >
  <el-menu
     default-active="2"
     class="el-menu-vertical-demo"
     :collapse="isCollapse"
     :collapse-transition="true"
     @open="handleOpen"
     @close="handleClose"
  >
    <el-sub-menu index="1">
      <template #title>
        <el-icon><location /></el-icon>
        <span>Navigator One</span>
      </template>
      <el-menu-item-group>
        <template #title><span>Group One</span></template>
        <el-menu-item index="1-1">item one</el-menu-item>
        <el-menu-item index="1-2">item two</el-menu-item>
      </el-menu-item-group>
      <el-menu-item-group title="Group Two">
        <el-menu-item index="1-3">item three</el-menu-item>
      </el-menu-item-group>
      <el-sub-menu index="1-4">
        <template #title><span>item four</span></template>
        <el-menu-item index="1-4-1">item one</el-menu-item>
      </el-sub-menu>
    </el-sub-menu>
    <el-menu-item index="2">
      <el-icon><icon-menu /></el-icon>
      <template #title>Navigator Two</template>
    </el-menu-item>
    <el-menu-item index="3" disabled>
      <el-icon><document /></el-icon>
      <template #title>Navigator Three</template>
    </el-menu-item>
    <el-menu-item index="4">
      <el-icon><setting /></el-icon>
      <template #title>Navigator Four</template>
    </el-menu-item>
  </el-menu>
  </el-aside>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import {
  Document,
  Menu as IconMenu,
  Location,
  Setting,
} from '@element-plus/icons-vue'

const isCollapse = ref(true)
const handleOpen = (key: string, keyPath: string[]) => {
  console.log(key, keyPath)
}
const handleClose = (key: string, keyPath: string[]) => {
  console.log(key, keyPath)
}
</script>

<style>
  /* 为侧边栏容器添加过渡效果 */
  .aside-container {
    transition: width 0.3s ease;
    overflow: hidden;
  }

  .el-menu-vertical-demo {
    border-right: none;
  }
</style>