这段代码中，页面顶部正中间的位置，加一个隐藏的悬浮按钮，鼠标移动上去的时候显示，按钮的效果是，点击后，隐藏导航栏和标题栏，再次点击则显示，， 导航栏和标题栏显示的隐藏时，不要瞬间完成，有个动画效果，以下为代码<template>
<div class="app
-container">
<!
-- 导航标题
-->
<div class="nav
-header">
<h3>iiot</h3>
</div>
<!
-- 主布局
-->
<div class="main
-layout">
<!
-- 左侧导航栏
-->
<div class="left
-nav">
<
el-menu
class="custom
-menu"
:collapse="false"
background
-color="#1a2b4a"
text
-color="#d7e3ff"
active
-text
-color="#409EFF"
:unique
-opened="true"
router
>
<
el-sub-menu index="1">
<template #title>
<
el-icon><Document /></
el-icon>
<
span>任务管理</
span>
</template>
<
el-menu-item
-group>
<
el-menu-item index="/taskList">调度任务</
el-menu-item>
<
el-menu-item index="/taskType">任务编辑</
el-menu-item>
<
el-menu-item index="/commandSet">指令编辑</
el-menu-item>
<
el-menu-item index="/log
-types">任务日志</
el-menu-item>
</
el-menu-item
-group>
</
el-sub-menu>
<
el-sub-menu index="2">
<template #title>
<
el-icon><Files /></
el-icon>
<
span>大屏展示</
span>
</template>
<
el-menu-item
-group>
<
el-menu-item index="/display_all">总览</
el-menu-item>
<
el-menu-item index="/warehouse_status">仓库状态</
el-menu-item>
</
el-menu-item
-group>
</
el-sub-menu>
<
el-sub-menu index="3">
<template #title>
<
el-icon><Notebook /></
el-icon>
<
span>库位管理</
span>
</template>
<
el-menu-item
-group>
<
el-menu-item index="/warehouse">库位管理</
el-menu-item>
<
el-menu-item index="/station">站点管理</
el-menu-item>
</
el-menu-item
-group>
</
el-sub-menu>
<
el-sub-menu index="4">
<template #title>
<
el-icon><Setting /></
el-icon>
<
span>配置模块</
span>
</template>
<
el-menu-item
-group>
<
el-menu-item index="4
-1">设备管理</
el-menu-item>
<
el-menu-item index="4
-2">变量管理</
el-menu-item>
<
el-menu-item index="4
-5">路径管理</
el-menu-item>
<
el-menu-item index="4
-6">管控区域</
el-menu-item>
</
el-menu-item
-group>
</
el-sub-menu>
</
el-menu>
</div>
<!
-- 右侧内容区
-->
<div class="right
-content">
<router
-view> </router
-view>
</div>
</div>
</div>
</template>
<script lang="ts" setup>
import { Document, Notebook, Files, Setting } from "@
element-plus/icons
-vue";
</script>
<style>
/* 全局样式重置 */
body,
html {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
overflow: hidden;
}
/* 确保所有元素
使用border
-box */
*,
*::before,
*::after {
box
-sizing: border
-box;
}
</style>
<style scoped>
.app
-container {
width: 100vw;
height: 100vh;
margin: 0;
padding: 0;
display: flex;
flex
-direction: column;
background
-color: #ffffff;
overflow: hidden;
}
.nav
-header {
padding: 12px 15px;
display: flex;
align
-items: center;
background
-color: #152238;
border
-bottom: 0px solid #000000;
flex
-shrink: 0;
}
.left
-nav {
height: 100%;
display: flex;
flex
-direction: column;
width: 200px; /* 固定宽度 */
}
.nav
-header h3 {
margin: 0;
font
-size: 22px;
color: #d7e3ff;
font
-weight: 600;
margin
-left: 10px;
}
.main
-layout {
display: flex;
flex: 1;
overflow: hidden;
min
-width: 0;
}
.right
-content {
flex: 1;
height: 100%;
background
-color: #f0f2f5;
overflow: auto;
padding: 0px;
}
.custom
-menu {
border
-right: none;
flex: 1;
width: 100%; /* 占满容器 */
}
/* 调整菜单项样式 */
.custom
-menu .el-menu-item,
.custom
-menu .el-sub-menu__title {
height: 50px;
line
-height: 50px;
}
/* 调整
图标和文字的间距 */
.custom
-menu .el-icon {
margin
-right: 8px;
}
</style>
超级会员免费看
本文介绍了Element Plus的el-sub-menu组件在添加图标时遇到的问题，分析了在<span>标签内添加图标可能导致折叠时图标消失的原因，并提供了解决方案和最佳实践，建议使用插槽或直接在菜单项标签内添加图标以确保显示正常。
订阅专栏 解锁全文
扫一扫
7045
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
