Vue/vuex/vue-router/element-ui 一个后台管理系统实现侧边栏和可配置tab标签栏的demo

自制一个简单demo,实现一个包含侧边栏、tab标签栏的后台管理系统的大致框架,在此做一下总结。

先上图

在这里插入图片描述

项目地址

https://github.com/ekko-wang/vue-elementui-demo

功能点

  1. 可配置的侧边栏;
  2. 侧边栏点击时跳转至相应的router,若没有该标签则新建,已有则激活这个标签;
  3. 点击标签栏中的标签实现下方的路由跳转;
  4. 关闭所有标签栏则自动打开至index。

1、侧边栏

src/components/navMenu/navMenu.vue
<!--本页为左侧下拉菜单-->
<template>
  <el-row class="tac">
    <el-col :span="24">
      <el-menu
        default-active=""
        class="el-menu-vertical-demo"
        background-color="#545c64"
        text-color="#fff"
        unique-opened
        router
        active-text-color="#fff"
      >
        <el-menu-item index="index" @click="clickMenu('index')">
          <i class="el-icon-star-on"></i>
          <span slot="title">首页</span>
        </el-menu-item>
        <el-submenu
          v-for="item of menu"
          :index="item.id"
          :key="item.id"
        >
          <template slot="title">
            <i class="el-icon-location"></i>
            <span>{
  
  {item.name}}</span>
          </template>
          <el-menu-item-group class="over-hide">
            <el-menu-item
        
<think>我们使用Element UI的布局组件来搭建后台管理页面。Element UI提供了Container布局容器,它由以下几个部分组成: - el-container:外层容器 - el-header:顶栏容器 - el-aside:侧边栏容器 - el-main:主要区域容器 - el-footer:底栏容器 基本结构如下: <el-container> <el-header>Header</el-header> <el-container> <el-aside>Aside</el-aside> <el-container> <el-main>Main</el-main> <el-footer>Footer</el-footer> </el-container> </el-container> </el-container> 或者另一种常见结构(左侧导航顶部导航分开): <el-container> <el-aside>侧边导航栏</el-aside> <el-container> <el-header>顶部栏</el-header> <el-main>主要内容</el-main> <el-footer>底部栏</el-footer> </el-container> </el-container> 这里我们采用第二种结构,因为通常后台管理系统的侧边导航栏是独立的,然后右侧分为顶部栏、内容区底部栏。 具体步骤: 1. 创建一个Vue组件(例如:BasicLayout.vue) 2. 引入Element UI的Container、Header、Aside、Main、Footer组件 3. 按照上述结构编写模板 4. 添加一些基本样式 注意:Element UI的布局容器默认使用flex布局,所以我们需要设置外层容器的高度(通常为100vh),并且内部嵌套的el-container也需要设置高度。 下面是一个完整的示例代码:</think># Element UI 后台管理布局实现 我将使用 Element UI 的布局组件快速搭建一个包含左侧导航栏、顶部栏、内容区底部栏的后台管理系统布局。 ## 完整实现代码 ```vue <template> <div class="admin-layout"> <!-- 整体布局容器 --> <el-container class="container" :style="{ height: containerHeight }"> <!-- 左侧导航栏 --> <el-aside width="200px" class="sidebar"> <div class="logo-container"> <div class="logo"> <i class="el-icon-s-platform"></i> <span>管理系统</span> </div> </div> <!-- 导航菜单 --> <el-menu default-active="1" class="el-menu-vertical-demo" background-color="#304156" text-color="#bfcbd9" active-text-color="#409EFF" router > <el-menu-item index="/dashboard"> <i class="el-icon-s-home"></i> <span>控制台</span> </el-menu-item> <el-submenu index="2"> <template slot="title"> <i class="el-icon-s-management"></i> <span>系统管理</span> </template> <el-menu-item index="/users">用户管理</el-menu-item> <el-menu-item index="/roles">角色管理</el-menu-item> <el-menu-item index="/permissions">权限管理</el-menu-item> </el-submenu> <el-menu-item index="/products"> <i class="el-icon-s-goods"></i> <span>产品管理</span> </el-menu-item> <el-menu-item index="/orders"> <i class="el-icon-s-order"></i> <span>订单管理</span> </el-menu-item> <el-menu-item index="/settings"> <i class="el-icon-setting"></i> <span>系统设置</span> </el-menu-item> </el-menu> </el-aside> <!-- 右侧内容区 --> <el-container> <!-- 顶部栏 --> <el-header class="header"> <div class="header-left"> <el-button type="text" icon="el-icon-s-fold" @click="collapseSidebar" class="collapse-btn" ></el-button> <el-breadcrumb separator="/" class="breadcrumb"> <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item> <el-breadcrumb-item v-for="(item, index) in breadcrumb" :key="index"> {{ item }} </el-breadcrumb-item> </el-breadcrumb> </div> <div class="header-right"> <el-tooltip content="全屏显示" placement="bottom"> <el-button type="text" :icon="fullscreenIcon" @click="toggleFullscreen" class="fullscreen-btn" ></el-button> </el-tooltip> <el-dropdown trigger="click" class="user-dropdown"> <div class="user-info"> <el-avatar :size="30" src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png" ></el-avatar> <span class="username">管理员</span> <i class="el-icon-caret-bottom"></i> </div> <el-dropdown-menu slot="dropdown"> <el-dropdown-item> <i class="el-icon-user"></i>个人中心 </el-dropdown-item> <el-dropdown-item> <i class="el-icon-setting"></i>系统设置 </el-dropdown-item> <el-dropdown-item divided> <i class="el-icon-switch-button"></i>退出登录 </el-dropdown-item> </el-dropdown-menu> </el-dropdown> </div> </el-header> <!-- 主要内容区域 --> <el-main class="main-content"> <!-- 标签页导航 --> <div class="tabs-container"> <el-tabs v-model="activeTab" type="card" closable @tab-remove="removeTab"> <el-tab-pane v-for="(tab, index) in tabs" :key="tab.name" :label="tab.title" :name="tab.name" > <!-- 标签页内容插槽 --> <slot v-if="index === 0" name="dashboard"></slot> <slot v-else-if="index === 1" name="users"></slot> <slot v-else-if="index === 2" name="settings"></slot> <slot v-else name="default"></slot> </el-tab-pane> </el-tabs> </div> <!-- 内容区域 --> <div class="content-container"> <router-view></router-view> </div> </el-main> <!-- 底部栏 --> <el-footer class="footer"> <div class="footer-content"> <div class="copyright">© 2023 后台管理系统 - 基于 Vue.js Element UI</div> <div class="links"> <a href="#">帮助中心</a> <a href="#">隐私政策</a> <a href="#">服务条款</a> </div> </div> </el-footer> </el-container> </el-container> </div> </template> <script> export default { name: 'AdminLayout', data() { return { containerHeight: '100vh', isCollapse: false, isFullscreen: false, activeTab: 'dashboard', tabs: [ { title: '控制台', name: 'dashboard' }, { title: '用户管理', name: 'users' }, { title: '系统设置', name: 'settings' } ], breadcrumb: ['控制台'] }; }, computed: { fullscreenIcon() { return this.isFullscreen ? 'el-icon-close' : 'el-icon-full-screen'; } }, methods: { // 切换侧边栏折叠状态 collapseSidebar() { this.isCollapse = !this.isCollapse; const sidebar = document.querySelector('.sidebar'); sidebar.style.width = this.isCollapse ? '64px' : '200px'; }, // 切换全屏模式 toggleFullscreen() { this.isFullscreen = !this.isFullscreen; if (this.isFullscreen) { this.containerHeight = '100vh'; const elem = document.documentElement; if (elem.requestFullscreen) { elem.requestFullscreen(); } else if (elem.mozRequestFullScreen) { elem.mozRequestFullScreen(); } else if (elem.webkitRequestFullscreen) { elem.webkitRequestFullscreen(); } else if (elem.msRequestFullscreen) { elem.msRequestFullscreen(); } } else { this.containerHeight = '100vh'; if (document.exitFullscreen) { document.exitFullscreen(); } else if (document.mozCancelFullScreen) { document.mozCancelFullScreen(); } else if (document.webkitExitFullscreen) { document.webkitExitFullscreen(); } else if (document.msExitFullscreen) { document.msExitFullscreen(); } } }, // 移除标签页 removeTab(targetName) { if (this.tabs.length <= 1) return; const tabs = this.tabs; let activeName = this.activeTab; if (activeName === targetName) { tabs.forEach((tab, index) => { if (tab.name === targetName) { const nextTab = tabs[index + 1] || tabs[index - 1]; if (nextTab) { activeName = nextTab.name; } } }); } this.activeTab = activeName; this.tabs = tabs.filter(tab => tab.name !== targetName); } } }; </script> <style scoped> .admin-layout { font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; color: #2c3e50; } .container { display: flex; } .sidebar { background-color: #304156; height: 100%; transition: width 0.3s; overflow: hidden; } .logo-container { height: 60px; display: flex; align-items: center; justify-content: center; border-bottom: 1px solid rgba(255, 255, 255, 0.1); } .logo { display: flex; align-items: center; color: #fff; font-size: 18px; font-weight: bold; } .logo i { font-size: 24px; margin-right: 10px; } .el-menu { border-right: none; } .header { display: flex; align-items: center; justify-content: space-between; background-color: #fff; box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08); padding: 0 20px; height: 60px; } .header-left { display: flex; align-items: center; } .collapse-btn { font-size: 20px; margin-right: 20px; color: #5a5e66; } .breadcrumb { line-height: 60px; } .header-right { display: flex; align-items: center; } .fullscreen-btn { font-size: 18px; color: #5a5e66; margin-right: 20px; } .user-info { display: flex; align-items: center; cursor: pointer; } .username { margin: 0 8px 0 12px; font-size: 14px; } .main-content { padding: 0; background-color: #f0f2f5; display: flex; flex-direction: column; height: calc(100vh - 120px); } .tabs-container { background-color: #fff; padding: 0 20px; box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08); } .content-container { flex: 1; padding: 20px; overflow-y: auto; } .footer { height: 60px; background-color: #fff; border-top: 1px solid #e8e8e8; display: flex; align-items: center; justify-content: center; } .footer-content { display: flex; flex-direction: column; align-items: center; justify-content: center; color: #909399; font-size: 12px; } .links { margin-top: 8px; } .links a { color: #909399; margin: 0 8px; text-decoration: none; } .links a:hover { color: #409EFF; } </style> ``` ## 布局结构说明 这个后台管理系统布局使用了 Element UI 的 Container 布局容器组件,包含以下主要部分: 1. **左侧导航栏 (Silder)** - 使用 `el-aside` 组件实现 - 包含系统 Logo 导航菜单 - 支持折叠/展开功能 - 深色主题设计,符合后台管理系统的视觉规范 2. **顶部栏 (Header)** - 使用 `el-header` 组件实现 - 包含面包屑导航、全屏切换按钮用户信息 - 响应式设计,适配不同屏幕尺寸 - 提供侧边栏折叠按钮 3. **主要内容区域 (Content)** - 使用 `el-main` 组件实现 - 包含标签页导航内容区域 - 支持多标签页管理 - 内容区域可滚动 4. **底部栏 (Footer)** - 使用 `el-footer` 组件实现 - 包含版权信息相关链接 - 简洁设计,不干扰主要内容 ## 功能特点 1. **响应式设计** - 自适应不同屏幕尺寸 - 左侧导航栏支持折叠/展开 2. **多标签页管理** - 支持打开多个标签页 - 可关闭标签页 - 动态切换内容 3. **用户交互功能** - 全屏模式切换 - 用户信息下拉菜单 - 面包屑导航 4. **视觉效果** - 精心设计的配色方案 - 适当的阴影间距 - 清晰的视觉层次 ## 使用说明 1. 将代码复制到 Vue 组件文件中 2. 在需要的地方引入该布局组件 3. 使用插槽填充内容区域: ```vue <admin-layout> <template v-slot:dashboard> <!-- 控制台内容 --> </template> <template v-slot:users> <!-- 用户管理内容 --> </template> </admin-layout> ``` 这个布局完全基于 Element UI 的组件构建,符合现代后台管理系统的设计规范,同时提供了良好的用户体验视觉效果。
评论 24
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值