Vue管理系统前端之组件拆分封装详解

2023-07-18 03:50:03 86

组件封装

在上一篇记录中，首页中有太多的代码，为了避免代码的臃肿，需要对主要的功能模块拆分，来让代码看起来更简洁，且能进行复用。

拆分后还加了些小功能，加入了修改title的代码，修改方式参考vue动态修改title。

还增加了当前请求的页面缓存，使用状态管理器处理。监听路由，保存到state中，来处理的。如何监听可参考vue计算属性和监听属性。

完整效果图如下：

首页布局拆分后结构

拆分后的，布局结构图：

拆分后代码

布局最外层index代码，使用头部，侧边栏，主内容栏组成，代码如下：

头部index.vue代码:







.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代码:






.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（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

Vue管理系统前端之组件拆分封装详解

热门推荐

随机推荐