vue3 / elementplus顶部导航栏设计
时间: 2025-02-10 20:58:56 浏览: 84
### 使用 Vue3 和 Element Plus 实现顶部导航栏设计
#### 组件结构定义
为了创建一个基于 `Vue3` 和 `Element Plus` 的顶部导航栏,首先需要安装并配置好这两个库。接着,在项目中新建一个名为 `TopNav.vue` 的文件来专门处理顶部导航逻辑。
```html
<template>
<div class="top-nav">
<!-- 定义 el-menu 组件作为主要容器 -->
<el-menu mode="horizontal" router :default-active="$route.path"
style="border-bottom: none;">
<!-- 动态加载菜单项 -->
<el-menu-item v-for="(item, index) in menuItems" :key="index" :index="item.path">{{ item.name }}</el-menu-item>
<!-- 子菜单示例 -->
<el-sub-menu index="/subMenuExample">
<template #title>更多选项</template>
<el-menu-item index="/examplePage">示例页面</el-menu-item>
</el-sub-menu>
</el-menu>
</div>
</template>
<script setup lang="ts">
import { ref } from 'vue';
// 菜单项数据源可以来自API或其他地方
const menuItems = [
{ name: "首页", path: "/" },
{ name: "产品介绍", path: "/product" },
{ name: "联系我们", path: "/contact" }
];
</script>
<style scoped>
/* 应用特定于本组件的样式 */
:deep(.el-menu-item),
:deep(.el-sub-menu__title) {
background: #073371 !important;
color: #7EA4DD;
font-size: 18px;
font-weight: bold;
height: 80px;
}
</style>
<style>
/* 设置全局样式的部分,影响子元素如弹出层宽度 */
.el-menu--collapse .el-menu .el-submenu,
.el-menu--popup {
min-width: 100px !important;
padding: 0 15px !important;
border: none !important;
text-align: center !important;
}
</style>
```
此代码片段展示了如何利用 `Vue3` 及其组合式 API (`setup`) 来构建响应路由变化的水平布局导航条,并通过自定义 CSS 类调整视觉效果[^1]。
阅读全文
相关推荐


















