vite+vue+ts+element-plus从零开发管理后台框架(08)-顶部整体布局

mirahs 的个人博客 / 27 / 0 / 创建于 7个月前

顶部整体使用左、中、右的布局。左侧宽度跟菜单宽度一样，如果菜单未折叠就显示后台logo和后台名称，如果折叠了就只显示后台logo。右侧内容自适应，主要是显示系统工具按钮和用户信息。中间使用剩余空间，主要是显示菜单折叠按钮和多页签。

布局

编辑src/views/Main.vue，template段el-header修改如下。

<el-header>
    <div class="header-left">left</div>
    <div class="header-center">center</div>
    <div class="header-right">right</div>
</el-header>

style段el-header类修改如下

.el-header {
    padding: 0px;
    border-bottom: 1px solid var(--el-border-color);

    .header-left {
        background-color: red;
    }
    .header-center {
        background-color: green;
    }
    .header-right {
        background-color: blue;
    }
}

浏览器查看效果，发现依次从上到下布局了。

布局1

使用 flex 完成布局效果

编辑src/views/Main.vue，style段el-header类修改如下。

.el-header {
    padding: 0px;
    border-bottom: 1px solid var(--el-border-color);

    display: flex;
    align-items: center;

    .header-left {
        background-color: red;
        width: 300px;
    }
    .header-center {
        background-color: green;
        flex-grow: 1;
    }
    .header-right {
        background-color: blue;
    }
}

浏览器查看效果，实现了左侧固定宽度，右侧内容自适应，中间使用剩余空间。

布局2

本作品采用《CC 协议》，转载必须注明作者和本文链接

284 声望

暂无个人描述~

推荐文章：

更多推荐...

vite2-electron-vadmin 一款清爽UI中后台权限管理系统|Electron-Vue3后台 12 / 3 |

基于 Vue2.0 开发的 Lumen IM 在线聊天应用 33 / 15 |

electron+vue 仿微信客户端聊天|electron 仿微信界面|electron 聊天实例 10 / 5 |

在 vue-cli 3.0 + 里面对 axios 封装 18 / 3 |

讨论数量: 0

(=￣ω￣=)··· 暂无内容！

讨论应以学习和精进为目的。请勿发布不友善或者负能量的内容，与人为善，比聪明更重要！

帮助

未填写

私信

文章归档

1 篇 2025 年 4 月 15 篇 2025 年 3 月 8 篇 2025 年 2 月 18 篇 2024 年 7 月 14 篇 2024 年 6 月 43 篇 2024 年 5 月 2 篇 2024 年 4 月 9 篇 2023 年 11 月

6个月前微信小程序开发内容安全检查 7个月前 vite+vue+ts+element-plus从零开发管理后台框架(22)-路由组件缓存 7个月前 vite+vue+ts+element-plus从零开发管理后台框架(21)-多页签点击切换 7个月前 vite+vue+ts+element-plus从零开发管理后台框架(20)-多页签移除和跳转 7个月前 vite+vue+ts+element-plus从零开发管理后台框架(19)-多页签

5 现在写从零组装一个简单的web框架系列文档会有人看吗？ 4 使用Composer从零开发一个简单的web框架(01)-项目初始化 2 使用Composer从零开发一个简单的restful框架(01)-项目初始化 2 vite+vue+ts+element-plus从零开发管理后台框架(01)-初始化 2 vite+vue+ts+element-plus从零开发管理后台框架(00)-说明

成为赞助商