效果展示:
1.我们需要在header 这里加上一个小的图标,用来点击实现菜单的显示与隐藏
2.在其他页面引入注册header 组件
3.在header 组件中
4.因为这两个组件都是属于main.vue 组件里面的
(1) 先将header对应的事件传给我们的 main.vue(大的组件)
(2) main.vue 改变 main 里面的某一个值
(3)在把最新的一个值传给 menu菜单组件
主要原因:navMenu 组件,有决定菜单的一个宽度,
在子组件(nav-header.vue )发射一个事件,给父组件
父组件页面监听子组件传递过来的数据
菜单子组件接收这个传递过来的数据
html 代码
.nav-menu{
height: 100%;
background-color: #001529;
.logo{
display: flex;
height: 28px;
padding: 12px 10px 8px 10px;
flex-direction: row;
justify-content: flex-start;
align-items: center;
.img{
height: 100%;
margin: 0 10px;
}
.title{
font-size: 16px;
font-weight: 700;
color: white;
}
}
.el-menu{
border-right: none;
}
// 目录
.el-submenu{
background-color: red !important;
// 二级菜单
.el-menu-item{
padding-left: 50px !important;
background-color: #0c2135 !important;
}
}
.el-menu-bg-color{
background:#001529 ;
}
::v-deep.el-submenu__title{
background-color: #001529 !important;
}
}
.el-menu-item:hover{
color: #fff !important;
}
.el-menu-item.is-active{
color: #fff !important;
background-color: #0a60bd !important;
}
.el-menu-vertical-demo:not(.el-menu--collapse){
width: 100%;
height:calc(100% - 48px);
}