当前位置：首页 > news >正文

element plus中menu菜单技巧

news 2025/8/5 4:46:54

我在使用element plus的menu（侧边栏）组件的过程中遇到了一些问题，就是menu编写样式和路由跳转，下面给大家分享以下，我是怎么解决的。

1.页面效果

我要实现的网站布局是这样的：

侧边栏折叠以后的效果：

网站的布局我是用element plus官网提供的布局方式：

2.样式

下面是对应的style设置：

这里我用了tailwind css。

3.路由

4.路由对应的页面

1.HomeView.vue

2.AboutView.vu

3.LayoutView.vue

<script setup>
import { Expand, Fold, HomeFilled, InfoFilled } from "@element-plus/icons-vue";
import {ref} from "vue";const isSidebarOpen = ref(false)</script><template><div class="common-layout"><el-container><el-aside :class="{'is-sidebar-open':isSidebarOpen}" width="200px" class="bg-gray-800 h-screen"><!--最上面logo--><div class="-ml-2 h-16 flex items-center justify-center"><img class="object-cover h-14 w-14" src="@/assets/images/A%20拷贝.png" alt="logo"><h1 v-show="!isSidebarOpen" class="-ml-2 text-2xl text-white font-bold">Blog</h1></div><el-menu:collapse="isSidebarOpen":collapse-transition="false"router:default-active="$route.path"background-color="#1f2937"text-color="#fff"style="border: none"><el-menu-item index="/home" route="/home"><el-icon><HomeFilled /></el-icon><span class="font-semibold">Home</span></el-menu-item><el-menu-item index="/about" route="/about"><el-icon><InfoFilled /></el-icon><span class="font-semibold">About</span></el-menu-item></el-menu></el-aside><el-container><el-header class="h-16 shadow-md z-10 flex items-center justify-between"><div><button @click="isSidebarOpen = !isSidebarOpen"><el-icon><component :is="isSidebarOpen ? Expand : Fold"></component></el-icon></button></div><div class="flex items-center space-x-4"><h1 class="font-medium">AkbarSmile</h1><img class="w-10 h-10 rounded-full" src="@/assets/images/Mofei1-cut.jpg" alt="avatar"></div></el-header><el-main class="bg-slate-100"><router-view></router-view></el-main></el-container></el-container></div>
</template><style scoped>
aside {@apply transition-all duration-300;
}
.is-sidebar-open {@apply w-16;
}.el-menu {@apply w-full
}
.el-menu--collapse .el-menu-item {@apply p-0 m-0 flex items-center justify-center;
}
.el-menu-item.is-active {@apply bg-purple-600 text-white w-full ;
}
</style>