最新消息:20210816 当前crifan.com域名已被污染,为防止失联,请关注(页面右下角的)公众号

【已解决】vue中用Element-UI实现后台页面整体布局

Vue crifan 19771浏览 0评论

想要实现类似于这样:

的后台页面布局效果:

顶部Header + 左边边栏 + 下面内容区域

而基于模板:

https://github.com/PanJiaChen/vueAdmin-template/tree/permission-control

现在的布局已有的是:

是左边变量到顶的,且没有Header,不太符合要求。

所以去研究如何整合布局。

参考:

组件 | Element

找到了我要的:

代码为:

<el-container>
  <el-header>Header</el-header>
  <el-container>
    <el-aside width=”200px”>Aside</el-aside>
    <el-main>Main</el-main>
  </el-container>
</el-container>

去试试。

【总结】

最后调试了半天,尤其是Header中的Image图片的垂直居中,然后基板上得到了想要的效果:

代码:

<template>
  <el-container>
    <el-header>
      <div class=”header_logo”>
        <img :src=”header_logo_img” alt=”skoda logo”>
      </div>
      <div class=”header_search”>
        <el-input
          placeholder=”请输入内容”
          prefix-icon=”el-icon-search”
        >
        </el-input>
      </div>
    </el-header>
    <el-container>
      <el-aside width=”80px”>Aside</el-aside>
      <el-main>Main</el-main>
    </el-container>
  </el-container>
</template>
<script>
import { Navbar, Sidebar, AppMain } from ‘@/views/layout’
import header_logo_img from ‘@/assets/skoda_logo_dark.jpg’
export default {
  name: ‘layout’,
  components: {
    Navbar,
    Sidebar,
    AppMain
  },
  data() {
    return {
      header_logo_img
    }
  },
  computed: {
    sidebar() {
      return this.$store.state.app.sidebar
    }
  }
}
</script>
<style rel=”stylesheet/scss” lang=”scss” scoped>
  .el-header{
    background-color: #545E6A;
    color: #F6F6F6;
    line-height: 60px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .header_row {
    height: 60px;
  }
  .el-aside {
    background-color: #3D464F;
    color: #828692;
    text-align: center;
    line-height: 600px;
  }
  .el-main {
    background-color: #283647;
    color: #E6E8EA;
    text-align: center;
    line-height: 600px;
  }
  body > .el-container {
    margin-bottom: 40px;
  }
  .el-container:nth-child(5) .el-aside,
  .el-container:nth-child(6) .el-aside {
    line-height: 260px;
  }
  .el-container:nth-child(7) .el-aside {
    line-height: 320px;
  }
  .header_logo {
    flex: 3;
    display: flex;
    justify-content: left;
    margin-left: 60px;
  }
  .header_search {
    display: flex;
    float: right;
    width: 200px;
  }
</style>

效果:

当前还有很多缺点:

Header,Aside,Main等宽度和高度,未必能自动适配所有屏幕。待后续再去优化。

转载请注明:在路上 » 【已解决】vue中用Element-UI实现后台页面整体布局

发表我的评论
取消评论

表情

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

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
83 queries in 0.179 seconds, using 22.13MB memory