element-ui 基础布局

比眉伴天荒 2022-05-11 11:04 825阅读 0赞

### **Container 布局容器** ###

**基础用法**

el-container：外层容器。当子元素中有 el-header 或 el-footer时，全部子元素会垂直上下排列，否则会水平左右排列。

el-header：顶栏容器。

el-aside：侧边栏容器。

el-main：主要区域容器。

el-footer：底栏容器。

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

**el-container属性：**

<table> 
 <thead> 
  <tr> 
   <th>参数</th> 
   <th>类型</th> 
   <th>说明</th> 
   <th>可选值</th> 
   <th>默认值</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>direction</td> 
   <td>子元素的排列方向</td> 
   <td>string</td> 
   <td>horizontal / vertical</td> 
   <td>子元素中有 el-header 或 el-footer 时为 vertical，否则为 horizontal</td> 
  </tr> 
 </tbody> 
</table>

**el-header属性：**

<table> 
 <thead> 
  <tr> 
   <th>参数</th> 
   <th>类型</th> 
   <th>说明</th> 
   <th>可选值</th> 
   <th>默认值</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>height</td> 
   <td>顶栏高度</td> 
   <td>string</td> 
   <td>—</td> 
   <td>60px</td> 
  </tr> 
 </tbody> 
</table>

**el-aside 属性：**

<table> 
 <thead> 
  <tr> 
   <th>参数</th> 
   <th>类型</th> 
   <th>说明</th> 
   <th>可选值</th> 
   <th>默认值</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>width</td> 
   <td>侧边栏宽度</td> 
   <td>string</td> 
   <td>—</td> 
   <td>300px</td> 
  </tr> 
 </tbody> 
</table>

**el-footer属性：**

<table> 
 <thead> 
  <tr> 
   <th>参数</th> 
   <th>类型</th> 
   <th>说明</th> 
   <th>可选值</th> 
   <th>默认值</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>height</td> 
   <td>底栏高度</td> 
   <td>string</td> 
   <td>—</td> 
   <td>60px</td> 
  </tr> 
 </tbody> 
</table>

**1.创建布局**

通过Col组件的`:span`属性调整Layout布局，分为24栏。

<el-row>
      <el-col :span="24"><div class="grid-content bg-purple-dark"></div></el-col>
    </el-row>

<table> 
 <thead> 
  <tr> 
   <th>参数</th> 
   <th>类型</th> 
   <th>说明</th> 
   <th>可选值</th> 
   <th>默认值</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>gutter</td> 
   <td>栅格间隔</td> 
   <td>number</td> 
   <td>—</td> 
   <td>0</td> 
  </tr> 
  <tr> 
   <td>type</td> 
   <td>布局模式，可选 flex，现代浏览器下有效</td> 
   <td>string</td> 
   <td>—</td> 
   <td>—</td> 
  </tr> 
  <tr> 
   <td>justify</td> 
   <td>flex 布局下的水平排列方式</td> 
   <td>string</td> 
   <td>start/end/center/space-around/space-between</td> 
   <td>start</td> 
  </tr> 
  <tr> 
   <td>align</td> 
   <td>flex 布局下的垂直排列方式</td> 
   <td>string</td> 
   <td>top/middle/bottom</td> 
   <td>top</td> 
  </tr> 
  <tr> 
   <td>tag</td> 
   <td>自定义元素标签</td> 
   <td>string</td> 
   <td>*</td> 
   <td>div</td> 
  </tr> 
 </tbody> 
</table>

**el-col 属性：**

<table> 
 <thead> 
  <tr> 
   <th>参数</th> 
   <th>类型</th> 
   <th>说明</th> 
   <th>可选值</th> 
   <th>默认值</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>span</td> 
   <td>栅格占据的列数</td> 
   <td>number</td> 
   <td>—</td> 
   <td>24</td> 
  </tr> 
  <tr> 
   <td>offset</td> 
   <td>栅格左侧的间隔格数</td> 
   <td>number</td> 
   <td>—</td> 
   <td>0</td> 
  </tr> 
  <tr> 
   <td>push</td> 
   <td>栅格向右移动格数</td> 
   <td>number</td> 
   <td>—</td> 
   <td>0</td> 
  </tr> 
  <tr> 
   <td>pull</td> 
   <td>栅格向左移动格数</td> 
   <td>number</td> 
   <td>—</td> 
   <td>0</td> 
  </tr> 
  <tr> 
   <td>xs</td> 
   <td>&lt;768px 响应式栅格数或者栅格属性对象</td> 
   <td>number/object (例如： {span: 4, offset: 4})</td> 
   <td>—</td> 
   <td>—</td> 
  </tr> 
  <tr> 
   <td>sm</td> 
   <td>≥768px 响应式栅格数或者栅格属性对象</td> 
   <td>number/object (例如： {span: 4, offset: 4})</td> 
   <td>—</td> 
   <td>—</td> 
  </tr> 
  <tr> 
   <td>md</td> 
   <td>≥992px 响应式栅格数或者栅格属性对象</td> 
   <td>number/object (例如： {span: 4, offset: 4})</td> 
   <td>—</td> 
   <td>—</td> 
  </tr> 
  <tr> 
   <td>lg</td> 
   <td>≥1200px 响应式栅格数或者栅格属性对象</td> 
   <td>number/object (例如： {span: 4, offset: 4})</td> 
   <td>—</td> 
   <td>—</td> 
  </tr> 
  <tr> 
   <td>xl</td> 
   <td>≥1920px 响应式栅格数或者栅格属性对象</td> 
   <td>number/object (例如： {span: 4, offset: 4})</td> 
   <td>—</td> 
   <td>—</td> 
  </tr> 
  <tr> 
   <td>tag</td> 
   <td>自定义元素标签</td> 
   <td>string</td> 
   <td>*</td> 
   <td>div</td> 
  </tr> 
 </tbody> 
</table>

**2.分栏间隔**

通过Row组件的`:gutter`属性来调整布局之间的宽度。

<el-row :gutter="20">
      <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
      <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
    </el-row>

**3.分栏漂移**

通过Col组件的`:offset`属性调整栅格的偏移位置（每次1格/24格）。

<el-row :gutter="20">
      <el-col :span="6" :offset="6"><div class="grid-content bg-purple"></div></el-col>
      <el-col :span="6" :offset="6"><div class="grid-content bg-purple"></div></el-col>
    </el-row>

4.对齐方式

通过Row组件的type="flex"启动flex布局，再通过Row组件的justify属性调整排版方式，属性值分别有

start 居前（默认）  
center 居中  
end 居后  
space-between 分布自适应（两边–中间，两边没有空隙）  
around （中间–两边，两边会有空隙）

<el-row type="flex" class="row-bg" justify="center">
      <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
      <el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>
    </el-row>

**5.响应式布局**

参考bootstrap的响应式，预设四个尺寸

1.  xs <768px
2.  sm ≥768px
3.  md ≥992
4.  lg ≥1200

<el-row :gutter="10">
      <el-col :xs="8" :sm="6" :md="4" :lg="3"><div class="grid-content bg-purple"></div></el-col>
      <el-col :xs="4" :sm="6" :md="8" :lg="9"><div class="grid-content bg-purple-light"></div></el-col>
      <el-col :xs="4" :sm="6" :md="8" :lg="9"><div class="grid-content bg-purple"></div></el-col>
      <el-col :xs="8" :sm="6" :md="4" :lg="3"><div class="grid-content bg-purple-light"></div></el-col>
    </el-row>

## ICON图标 ##

今后可以使用`<i>`来做图标，给其`class`添加el-icon-iconName即可。   
可以在`<button>`上添加`icon`属性。

参考[https://blog.csdn.net/jack\_bob/article/details/79813114][https_blog.csdn.net_jack_bob_article_details_79813114]

[https_blog.csdn.net_jack_bob_article_details_79813114]: https://blog.csdn.net/jack_bob/article/details/79813114