vue3+element plus 实现管理系统布局样式

先看效果

  • 未设置样式之前:布局没有充满整个页面,而且布局高度会随着左边菜单内容的展开而变化

vue3+element plus 实现管理系统布局样式_第1张图片

vue3+element plus 实现管理系统布局样式_第2张图片

  • 设置样式后:布局充满整个页面,左边菜单内容展开后也不会影响布局高度,左边菜单内容超出页面高度时会自动添加滚动条

vue3+element plus 实现管理系统布局样式_第3张图片

vue3+element plus 实现管理系统布局样式_第4张图片

 项目结构目录:

 vue3+element plus 实现管理系统布局样式_第5张图片

设置样式之前代码: 

App.vue





 Home.vue   





代码来源于element plus中Container 布局容器

vue3+element plus 实现管理系统布局样式_第6张图片

Menu.vue



代码来源于element plus中Menu 菜单

vue3+element plus 实现管理系统布局样式_第7张图片

 设置样式:

分别在Home.vue和Menu.vue中添加以下样式即可

Home.vue


Menu.vue

注:若只添加了Home.vue样式则会出现以下效果,menu没有充满页面

vue3+element plus 实现管理系统布局样式_第8张图片

你可能感兴趣的:(vue.js,javascript,前端)