element布局容器大小_Element-UI 技术揭秘(4)— Container 布局容器组件的设计与实现。...

前言

上一篇文章我们分析了 Layout 布局组件的设计和实现,它的应用场景通常是局部布局。对于整个页面的布局,element-ui 提供了 Container 布局容器组件,专门用于 PC 管理后台页面的整体布局。

需求分析

我们先通过几幅图看一下页面的常见布局。

element布局容器大小_Element-UI 技术揭秘(4)— Container 布局容器组件的设计与实现。..._第1张图片

element布局容器大小_Element-UI 技术揭秘(4)— Container 布局容器组件的设计与实现。..._第2张图片

这两张图的布局在后台系统中很常见,通过简单的 CSS 就可以实现。不过我们更喜欢用组件化的开发方式,把这些 CSS 的细节封装到组件里,如下:

Header

Main

Footer

Header

Aside

Main

Footer

复制代码

我们使用了 、、、、 5 种组件,来看一下它们各自的作用:

:外层容器。当子元素中包含 或 时,全部子元素会垂直上下排列,否则会水平左右排列。

:顶栏容器。

:侧边栏容器。

:主要区域容器。

:底栏容器。

这几个组件需要遵循如下约束:

的子元素只能是后四者,后四者的父元素也只能是 。

了解了 element-ui Container 布局容器组件的需求后,我们来分析它的设计和实现。​

设计和实现

针对图示的布局,我们可以通过 flex 的布局方式轻松实现,element-ui 也是基于 flex 布局实现的,接下来我们来分析各个组件的实现。

ElContainer 组件

先来看模板部分:

复制代码

组件会渲染成一个 标签,并通过 slot 做内容分发。

再来看一下 CSS 部分:

@include b(container) {

你可能感兴趣的:(element布局容器大小)