Element-Ui组件页面布局

Posted 究极死胖兽

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Element-Ui组件页面布局相关的知识,希望对你有一定的参考价值。

Element-Ui组件(一)页面布局

本文参考Element官方文档:

http://element-cn.eleme.io/#/zh-CN/component

常用布局
el-rowel-col可搭配实现24格栅格布局,若布局较复杂,可以嵌套使用。
el-container作为布局容器(可以嵌套使用),内部可包含el-header(顶栏),el-aside(侧边栏),el-main(内容),el-footer(底栏)。
页面效果

示例代码

<template>
  <el-container>
    <!-- 顶栏 -->
    <el-header height="60px">
      <h2>Element 页面布局</h2>
    </el-header>
    <!-- 嵌套容器 -->
    <el-container>
      <!-- 侧边导航菜单 -->
      <el-aside width="150px"></el-aside>
      <!-- 内容 -->
      <el-main>
        <!-- 第一列栅格布局 -->
        <el-row>
          <el-col :span="12" class="col1"></el-col>
          <el-col :span="12" class="col2"></el-col>
        </el-row>
        <!-- 第二列布局 -->
        <el-row>
          <el-col :span="24" class="col3"></el-col>
        </el-row>
      </el-main>
    </el-container>
    <!-- 底栏 -->
    <el-footer height="30px">&copy;究极死胖兽 2019</el-footer>
  </el-container>
</template>

<script>
export default 

</script>

<style>
.el-header 
  background-color: #409EFF;
  color: white;

.el-footer 
  background-color: #909399;
  color: black;
  text-align: center;

.el-aside 
  background-color: chartreuse;

.el-main 
  background-color: darkkhaki;

.el-col 
  height: 200px;

.col1 
  background-color: teal;

.col2 
  background-color: tomato;

.col3 
  background-color: thistle;

</style>

el-row 属性:

参数类型说明可选值默认值
gutter栅格间隔number0
type布局模式,可选 flex,现代浏览器下有效string
justifyflex 布局下的水平排列方式stringstart/end/center/space-around/space-betweenstart
alignflex 布局下的垂直排列方式stringtop/middle/bottomtop
tag自定义元素标签string*div

el-col 属性:

参数类型说明可选值默认值
span栅格占据的列数number24
offset栅格左侧的间隔格数number0
push栅格向右移动格数number0
pull栅格向左移动格数number0
xs<768px 响应式栅格数或者栅格属性对象number/object (例如: span: 4, offset: 4)
sm≥768px 响应式栅格数或者栅格属性对象number/object (例如: span: 4, offset: 4)
md≥992px 响应式栅格数或者栅格属性对象number/object (例如: span: 4, offset: 4)
lg≥1200px 响应式栅格数或者栅格属性对象number/object (例如: span: 4, offset: 4)
xl≥1920px 响应式栅格数或者栅格属性对象number/object (例如: span: 4, offset: 4)
tag自定义元素标签string*div

el-container属性:

参数类型说明可选值默认值
direction子元素的排列方向stringhorizontal / vertical子元素中有 el-header 或 el-footer 时为 vertical,否则为 horizontal

el-header属性:

参数类型说明可选值默认值
height顶栏高度string60px

el-aside 属性:

参数类型说明可选值默认值
width侧边栏宽度string300px

el-footer属性:

参数类型说明可选值默认值
height底栏高度string60px

以上是关于Element-Ui组件页面布局的主要内容,如果未能解决你的问题,请参考以下文章

Vue+ELementUI主页布局----侧边栏布局(el-aside)

前端Vue框架 05 第三方插件(vuex: 组件间交互的(移动端), axios - 前后台(django): ajax, element-ui: 页面布局, jq+bs: jQuery+Boo

Drawer实现侧边栏布局

基于element-ui封装侧边栏菜单,可无限展开

基于element-ui封装侧边栏菜单,可无限展开

基于element-ui封装侧边栏菜单,可无限展开