P4-Vue3后台管理系统-顶部导航与左侧导航联动⾯包屑P4-Vue3后台管理系统-顶部导航与左侧导航联动⾯包屑
1.概述
上篇⽂章实现了左侧边栏导航，这篇⽂章我们开发顶部导航。
2.顶部导航栏设置
2.1.设置导航栏背景⾊
在Main.vue组建中设置Header导航栏背景⾊
2.1.Header添加按钮
官⽹中到Button按钮–图标按钮–复制图标按钮代码
应⽤到CommonHeader组件中
js导航栏下拉菜单
官⽹搜索图标替换按钮默认图标
2.2.添加头像下拉菜单
Element官⽹到点击触发下拉菜单
复制点击触发下拉菜单代码
应⽤到CommonHeader组件中
CommonHeader组件完整代码
<template>
<header>
<div class="l-content">
<!-- sezi设置按钮尺⼨ -->
<el-button type="primary"icon="el-icon-menu"size="mini"></el-button>
</div>
<!-- 设置导航栏右边头像 -->
<div class="r-content">
<el-dropdown trigger="click">
<span class="el-dropdown-link">下拉菜单<i class="el-icon-arrow-down el-icon--right"></i></span> <el-dropdown-menu slot="dropdown">
<el-dropdown-item icon="el-icon-plus">黄⾦糕</el-dropdown-item>
<el-dropdown-item icon="el-icon-circle-plus">狮⼦头</el-dropdown-item>
<el-dropdown-item icon="el-icon-circle-plus-outline">螺蛳粉</el-dropdown-item>
<el-dropdown-item icon="el-icon-check">双⽪奶</el-dropdown-item>
<el-dropdown-item icon="el-icon-circle-check">蚵仔煎</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</div>
</header>
</template>
<script>
export default{}
</script>
<style lang="scss"scoped>
/
/ 设置header为弹性容器
header{
display: flex;
// 设置弹性容器中元素⽔平⽅向居中
align-items: center;
height: 100%;
// 设置元素两端对齐
justify-content: space-between;
}
</style>
-CommonHeader组件导航栏效果
2.3.添加下拉菜单头像

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。