使用ElementUI实现简单的后台管理首页布局

Web前端 潘老师 2周前 (10-08) 134 ℃ (0) 扫码查看

在使用ElementUI实现后台管理首页布局是比较常见的一个需求,下面潘老师就带大家来实现简单的后台管理布局。我这里使用的是vue-cli脚手架整合ElementUI来搭建的环境,如果你还不会整合请参考博文:

ElmentUI入门(1)——使用vue-cli集成ElementUI环境搭建步骤

一、初识ElmentUI 1、介绍 Element-UI 是饿了么前端团队推出的一款基于Vue.js 2.0 […]

使用ElementUI实现简单的后台管理首页布局
1)首先我们在components文件夹中新建一个Home.vue组件,作为我们的后台管理首页组件,我们参考ElementUI官方文档中的Container布局容器,来实现该布局,此时Home.vue代码如下:

<template>
    <el-container>
        <!-- 头部高度设为50px(默认60px) -->
        <el-header height="50px">Header</el-header>
        <el-container>
            <!-- 菜单栏宽度设为230px -->
            <el-aside width="230px">Aside</el-aside>
            <el-main>Main</el-main>
        </el-container>
    </el-container>
</template>

<script>
    export default {
        
    }
</script>

<style scoped>
    /*占满全屏*/
    .el-container{
        position: absolute;
        width: 100%;
        top: 0;
        left: 0;
        bottom: 0;
    }
    /*上外边距50px,防止挡住Header*/
    .el-aside,.el-main{
        margin-top: 50px;
    }
    /*设置背景色,方便观察效果*/
    .el-header{
        background-color: #0074D9;
    }
    .el-aside{
        background-color: #545c64;
    }
    .el-main{
        background-color: #eee;
    }
</style>

2)接着我们将Home.vue导入App.vue并注册使用,App.vue代码如下:

<template>
  <div id="app">
    <!-- 后期整合vue-router可以替换为router-view,根据路由去展示是首页还是登录、注册页 -->
    <Home></Home>
  </div>
</template>

<script>
    import Home from "./components/Home.vue"
    export default {
      methods: {
      },
      components:{
          Home
      }
    }
</script>

<style>
    /* 去除浏览器默认边距 */
    *{
        margin:0;
        padding: 0;
    }
</style>

3)查看效果如图:
使用ElementUI实现简单的后台管理首页布局

1)参考官方文档NavMenu 导航菜单自定义颜色和可折叠菜单的代码,我们稍作修改将Home.vue中的el-aside内代码修改如下:

<!-- 菜单栏宽度设为自动 -->
<el-aside width="auto">
    <el-radio-group v-model="isCollapse">
        <el-radio-button :label="false">展开</el-radio-button>
        <el-radio-button :label="true">收起</el-radio-button>
    </el-radio-group>
    <el-menu
        default-active="2"
        class="el-menu-vertical" 
        background-color="#545c64"
        text-color="#fff"
        active-text-color="#ffd04b"
        :collapse="isCollapse">
        <el-submenu index="1">
            <template slot="title">
                <i class="el-icon-location"></i>
                <span>导航一</span>
            </template>
            <el-menu-item-group>
                <template slot="title">分组一</template>
                <el-menu-item index="1-1">选项1</el-menu-item>
                <el-menu-item index="1-2">选项2</el-menu-item>
            </el-menu-item-group>
            <el-menu-item-group title="分组2">
                <el-menu-item index="1-3">选项3</el-menu-item>
            </el-menu-item-group>
            <el-submenu index="1-4">
                <template slot="title">选项4</template>
                <el-menu-item index="1-4-1">选项1</el-menu-item>
            </el-submenu>
        </el-submenu>
        <el-menu-item index="2">
            <i class="el-icon-menu"></i>
            <span slot="title">导航二</span>
        </el-menu-item>
        <el-menu-item index="3" disabled>
            <i class="el-icon-document"></i>
            <span slot="title">导航三</span>
        </el-menu-item>
        <el-menu-item index="4">
            <i class="el-icon-setting"></i>
            <span slot="title">导航四</span>
        </el-menu-item>
    </el-menu>
</el-aside>

2)将菜单的右侧边框宽度去除以及设置展开时菜单宽度,所以添加如下样式:

/* 去除菜单右侧边框 */
.el-menu{
  border-right: none;
}
/* 设置展开时菜单宽度 */
.el-menu-vertical:not(.el-menu--collapse) {
    width: 230px;
}

3)定义isCollapse属性,脚本如下:

<script>
    export default {
        data() {
            return {
                isCollapse: false
            };
        }
    }
</script>

4)此时效果如图:
使用ElementUI实现简单的后台管理首页布局

头部我这里将其划分为3块,最左侧为logo区域,其右侧有一个可折叠菜单按钮(优化可折叠样式),最右侧可以放在一些头部菜单,我们这里最右侧只放置用户信息即可。
1)设置el-headerz-index为最上层,否则会被Main和Aside遮挡,因此在修改.el-header样式如下:

/*设置背景色,方便观察效果*/
.el-header{
    background-color: #0074D9;
    /* 上层显示,避免被Main和Aside遮挡 */
    z-index: 999;
}

2)删除Asideel-radio-group展开收起组件,我们将其放到Header中,el-header整体代码如下:

<!-- 头部高度设为50px(默认60px) -->
<el-header height="50px">
    <!-- logo -->
    <a class="logo" href="/">商城管理系统</a>
    <!-- 折叠菜单按钮 -->
    <div class="toggle"  @click="isCollapse = !isCollapse">
        <i class="el-icon-s-unfold" v-if="isCollapse"></i>
        <i class="el-icon-s-fold" v-if="!isCollapse"></i>
    </div>
    <!-- 下拉菜单 -->
    <el-dropdown>
      <span class="el-dropdown-link">
        <i class="el-icon-user el-icon--left"></i>
      </span>
      <el-dropdown-menu slot="dropdown">
        <el-dropdown-item icon="el-icon-switch-button">注销</el-dropdown-item>
      </el-dropdown-menu>
    </el-dropdown>
</el-header>

3)新增对应的样式如下:

/* logo */
.logo{
    color: #fff;
    text-align: center;
    font-size: 26px;
    line-height: 50px;
    padding: 0 15px;
    font-weight: 400;
    text-decoration: none;
}
/* 折叠按钮 */
.toggle{
    color: #fff;
    text-align: center;
    font-size: 26px;
    line-height: 50px;
    display: inline-block;
    padding: 0 15px;
    border-left: solid 1px #ccc;
    position: absolute;
    left:230px;
    cursor: pointer;
}
.toggle:hover{
    background-color: #ffd04b;
}
/* 下拉菜单 */
.el-dropdown{
    color: #fff;
    text-align: center;
    font-size: 26px;
    line-height: 50px;
    float: right;
}

4)测试样式如下:
使用ElementUI实现简单的后台管理首页布局

el-main组件中可以结合vue-router路由嵌套实现页面的跳转与显示,至此我们整个基于ElementUI的简单后台布局就完成了。

PS:以下附上Home.vue的完整代码:

<template>
    <el-container>
        <!-- 头部高度设为50px(默认60px) -->
        <el-header height="50px">
            <!-- logo -->
            <a class="logo" href="/">商城管理系统</a>
            <!-- 折叠菜单按钮 -->
            <div class="toggle"  @click="isCollapse = !isCollapse">
                <i class="el-icon-s-unfold" v-if="isCollapse"></i>
                <i class="el-icon-s-fold" v-if="!isCollapse"></i>
            </div>
            <!-- 下拉菜单 -->
            <el-dropdown>
              <span class="el-dropdown-link">
                <i class="el-icon-user el-icon--left"></i>
              </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item icon="el-icon-switch-button">注销</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
        </el-header>
        <el-container>
            <!-- 菜单栏宽度设为自动 -->
            <el-aside width="auto">
                <el-menu
                    default-active="2"
                    class="el-menu-vertical" 
                    background-color="#545c64"
                    text-color="#fff"
                    active-text-color="#ffd04b"
                    :collapse="isCollapse">
                    <el-submenu index="1">
                        <template slot="title">
                            <i class="el-icon-location"></i>
                            <span>导航一</span>
                        </template>
                        <el-menu-item-group>
                            <template slot="title">分组一</template>
                            <el-menu-item index="1-1">选项1</el-menu-item>
                            <el-menu-item index="1-2">选项2</el-menu-item>
                        </el-menu-item-group>
                        <el-menu-item-group title="分组2">
                            <el-menu-item index="1-3">选项3</el-menu-item>
                        </el-menu-item-group>
                        <el-submenu index="1-4">
                            <template slot="title">选项4</template>
                            <el-menu-item index="1-4-1">选项1</el-menu-item>
                        </el-submenu>
                    </el-submenu>
                    <el-menu-item index="2">
                        <i class="el-icon-menu"></i>
                        <span slot="title">导航二</span>
                    </el-menu-item>
                    <el-menu-item index="3" disabled>
                        <i class="el-icon-document"></i>
                        <span slot="title">导航三</span>
                    </el-menu-item>
                    <el-menu-item index="4">
                        <i class="el-icon-setting"></i>
                        <span slot="title">导航四</span>
                    </el-menu-item>
                </el-menu>
            </el-aside>
            <!-- 可以结合vue-router路由嵌套实现页面的跳转与显示 -->
            <el-main>Main</el-main>
        </el-container>
    </el-container>
</template>
 
<script>
    export default {
        data() {
            return {
                isCollapse: false
            };
        }
    }
</script>
 
<style scoped>
    /*占满全屏*/
    .el-container{
        position: absolute;
        width: 100%;
        top: 0;
        left: 0;
        bottom: 0;
    }
    /*上外边距50px,防止挡住Header*/
    .el-aside,.el-main{
        margin-top: 50px;
    }
    /*设置背景色,方便观察效果*/
    .el-header{
        background-color: #0074D9;
        /* 上层显示,避免被Main和Aside遮挡 */
        z-index: 999;
    }
    .el-aside{
        background-color: #545c64;
    }
    .el-main{
        background-color: #eee;
    }
    /* 去除菜单右侧边框 */
    .el-menu{
      border-right: none;
    }
    /* 设置展开时菜单宽度 */
    .el-menu-vertical:not(.el-menu--collapse) {
        width: 230px;
    }
    /* logo */
    .logo{
        color: #fff;
        text-align: center;
        font-size: 26px;
        line-height: 50px;
        padding: 0 15px;
        font-weight: 400;
        text-decoration: none;
    }
    /* 折叠按钮 */
    .toggle{
        color: #fff;
        text-align: center;
        font-size: 26px;
        line-height: 50px;
        display: inline-block;
        padding: 0 15px;
        border-left: solid 1px #ccc;
        position: absolute;
        left:230px;
        cursor: pointer;
    }
    .toggle:hover{
        background-color: #ffd04b;
    }
    /* 下拉菜单 */
    .el-dropdown{
        color: #fff;
        text-align: center;
        font-size: 26px;
        line-height: 50px;
        float: right;
    }
</style>

版权声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系潘老师进行处理。
喜欢 (6)
请潘老师喝杯Coffee吧!】
分享 (0)
发表我的评论
取消评论
表情 贴图 签到 代码

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填【保密】)
  • 网址