.header{
padding-left:0px!important;
height:60px;
line-height:60px;
width:100%;
background:#4b5f6e;
color:#fff;
.heardNavBar{
float:left;
background:#4b5f6e;
padding:0px0px;
height:60px;
line-height:60px;
font-size:28px;
cursor:pointer;
}
.userinfo{
text-align:right;
padding-right:24px;
float:right;
padding:010px;
.userinfo-inner{
font-size:20px;
cursor:pointer;
color:#fff;
img{
width:40px;
height:40px;
border-radius:10px;
margin:10px0px10px10px;
float:right;
}
}
}
}
头部中引用的相关组件代码如下
折叠导航栏hamburger下的index.vue代码:
.hamburger{
padding-left:13px;
padding-right:13px;
text-align:center;
width:34px;
height:60px;
line-height:60px;
float:left;
cursor:pointer;
}
.is-active{
transform:rotate(180deg);
}
折叠导航栏logo下的index.vue代码:
.logo{
float:left;
height:60px;
padding:0;
margin:0;
}
.logo-width{
width:230px;
}
.logo-collapse-width{
width:65px;
}
侧边栏下的index.vue代码:
系统管理
用户管理
菜单管理
导航一
导航二
.aside-container{
position:fixed;
top:0px;
left:0;
bottom:0;
z-index:1020;
.el-menu{
position:absolute;
top:60px;
bottom:0px;
text-align:left;
}
}
.aside-width{
width:230px;
}
.aside-collapse-width{
width:65px;
}
内容模块下的index.vue代码:
关闭当前标签
关闭其它标签
关闭全部标签
刷新当前标签
{{item.title}}
.main-container{
padding:05px5px;
position:absolute;
top:60px;
left:1px;
right:1px;
bottom:0px;
.tabs{
position:fixed;
top:60px;
right:50px;
padding-left:0px;
padding-right:2px;
z-index:1020;
height:40px;
line-height:40px;
font-size:14px;
background:rgb(255,253,255);
border-color:rgba(200,206,206,0.5);
//border-left-width:1px;
//border-left-style:solid;
border-bottom-width:1px;
border-bottom-style:solid;
}
.tabs-tools{
position:fixed;
top:60px;
right:0;
z-index:1020;
height:40px;
//padding:010px;
font-size:14px;
line-height:40px;
cursor:pointer;
border-color:rgba(200,206,206,0.5);
border-left-width:1px;
border-left-style:solid;
border-bottom-width:1px;
border-bottom-style:solid;
background:rgba(255,255,255,1);
}
.tabs-tools:hover{
background:rgba(200,206,206,1);
}
.main-content{
position:absolute;
top:45px;
left:5px;
right:5px;
bottom:5px;
padding:5px;
//background:rgba(209,212,212,0.5);
}
}
.position-left{
left:230px;
}
.position-collapse-left{
left:65px;
}
状态管理中添加app模块
代码如下:
exportdefault{
state:{
//是否折叠导航栏
isCollapse:false,
//访问页集合
mainTabs:[],
//当前访问页名
mainTabsActiveName:'',
},
getters:{
isCollapse:(state)=>{
returnstate.isCollapse
},
},
mutations:{
toggleCollapse(state){
state.isCollapse=!state.isCollapse
},
updateMainTabs(state,tabs){
state.mainTabs=tabs
},
updateMainTabsActiveName(state,name){
state.mainTabsActiveName=name
},
},
actions:{},
}
当然还有一些小的调整点,可参考git上的提交版本首页组件拆分
总结
到此这篇关于Vue管理系统前端之组件拆分封装的文章就介绍到这了,更多相关Vue组件拆分封装内容请搜索毛票票以前的文章或继续浏览下面的相关文章希望大家以后多多支持毛票票!
声明:本文内容来源于网络,版权归原作者所有,内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎发送邮件至:czq8825#qq.com(发邮件时,请将#更换为@)进行举报,并提供相关证据,一经查实,本站将立刻删除涉嫌侵权内容。