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

Web前端 潘老师 3年前 (2020-10-08) 4519 ℃ (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>

版权声明:本站文章,如无说明,均为本站原创,转载请注明文章来源。如有侵权,请联系博主删除。
本文链接:https://www.panziye.com/java/web/1465.html
喜欢 (8)
请潘老师喝杯Coffee吧!】
分享 (0)
用户头像
发表我的评论
取消评论
表情 贴图 签到 代码

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

  • 昵称【必填】
  • 邮箱【必填】
  • 网址【可选】