这是一段 代码，其中有一个功能，将鼠标放到导航栏时，会弹出
显示全部，移动出来时，会缩回去，这个功能去掉，我
不想要了，以下是代码<template>
<div class="app
-container">
<!
-- 导航
标题 -->
<div class="nav
-header">
<h3>iiot</h3>
</div>
<!
-- 主布局
-->
<div class="main
-layout">
<!
-- 左侧导航栏
-->
<div
class="left
-nav"
@mouseenter="isCollapse = false"
@mous
eleave="isCollapse = true"
>
<
el-menu
default
-active="2"
class="custom
-menu"
:collapse="isCollapse"
@open="handleOpen"
@close="handleClose"
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="device_status">设备状态</
el-menu-item>
<
el-menu-item index="warehouse_status">仓库状态</
el-menu-item>
<
el-menu-item index="task_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 { ref } from "
vue";
import { Document, Notebook, Files, 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>
/*
全局样式重置 */
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;
min
-width: 64px; /* 折叠状态的最小宽度 */
transition: all 0.3s ease;
}
.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; /* 防止flex项目溢出 */
}
.right
-content {
flex: 1;
height: 100%;
background
-color: #f0f2f5;
overflow: auto;
padding: 0px;
}
.custom
-menu {
border
-right: none;
flex: 1;
}
.custom
-menu:not(.
el-menu--collapse) {
width: 200px;
}
/* 调整菜单项样式 */
.custom
-menu .
el-menu-item,
.custom
-menu .
el-sub
-menu__title {
height: 50px;
line
-height: 50px;
}
/* 调整图标和文字的间距 */
.custom
-menu .
el-icon {
margin
-right: 8px;
}
</style>
文章讲述了如何在Vue-Element-Admin项目中修改`Sidebar`组件的`index.vue`文件，通过添加CSS解决经典文字超长溢出问题，以及如何实现动态控制收起时的icon图标。
扫一扫
1931
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
