使用container的嵌套_ElementUI 技术揭秘(4)— Container 布局容器组件的设计与实现。...
前言
上一篇文章我们分析了 Layout 布局组件的设计和实现,它的应用场景通常是局部布局。对于整个页面的布局,element-ui
提供了 Container
布局容器组件,专门用于 PC 管理后台页面的整体布局。
需求分析
我们先通过几幅图看一下页面的常见布局。
这两张图的布局在后台系统中很常见,通过简单的 CSS 就可以实现。不过我们更喜欢用组件化的开发方式,把这些 CSS 的细节封装到组件里,如下:
<el-container> <el-header>Headerel-header> <el-main>Mainel-main> <el-footer>Footerel-footer>el-container>
<el-container> <el-header>Headerel-header> <el-container> <el-aside width="200px">Asideel-aside> <el-container> <el-main>Mainel-main> <el-footer>Footerel-footer> el-container> el-container>el-container>
我们使用了 、、、、 5 种组件,来看一下它们各自的作用:
:外层容器。当子元素中包含 或 时,全部子元素会垂直上下排列,否则会水平左右排列。
:顶栏容器。
:侧边栏容器。
:主要区域容器。
:底栏容器。
这几个组件需要遵循如下约束:
的子元素只能是后四者,后四者的父元素也只能是 。
了解了 element-ui
Container 布局容器组件的需求后,我们来分析它的设计和实现。
设计和实现
针对图示的布局,我们可以通过 flex 的布局方式轻松实现,element-ui
也是基于 flex 布局实现的,接下来我们来分析各个组件的实现。
ElContainer 组件
先来看模板部分:
<template> <section class="el-container"> <slot>slot> section>template>
组件会渲染成一个 标签,并通过 slot
做内容分发。
再来看一下 CSS 部分:
@include b(container) { display: flex; flex-direction: row; flex: 1; flex-basis: auto; box-sizing: border-box; min-width: 0;}
重点看一下 CSS 部分,display:flex
创建了一个 flex 容器,flex-direction:row
指定了内部元素是在水平方向排列。这里为什么还有 flex:1
呢,因为 容器是支持嵌套的,并且我们知道 flex:1
相当于 flex-grow:1;flex-shrink:1;flex-basis:0
,也就是当 被嵌套的时候,它会占满剩余空间。flex-basis:auto
表示分配空间之前会先跟父容器预约自身内容大小的空间,然后剩下的才会归入到剩余空间。
容器默认是水平排列,当然也需要支持垂直排列,我们可以给组件提供一个 direction
的 prop
,如果传入的 direction
是 vertical
,添加对应的 CSS。
<template> <section class="el-container" :class="{ 'is-vertical': isVertical }"> <slot>slot> section>template>
export default { name: 'ElContainer',
componentName: 'ElContainer',
props: { direction: String },
computed: { isVertical() { if (this.direction === 'vertical') { return true; } else if (this.direction === 'horizontal') { return false; } } }};
@include when(vertical) {}
如果传入的 direction
为 vertical
,则添加 is-vertical
的 CSS,最终通过修改 flex-direction:column
实现内部元素是在垂直方向排列。
回顾前面的一个需求:当 容器的子元素中包含 或 时,全部子元素会垂直上下排列,否则会水平左右排列。
实现它也很容易,扩展计算属性 isVertical
的判断条件即可:
computed: { isVertical() { if (this.direction === 'vertical') { return true; } else if (this.direction === 'horizontal') { return false; } return this.$slots && this.$slots.default ? this.$slots.default.some(vnode => { const tag = vnode.componentOptions && vnode.componentOptions.tag; return tag === 'el-header' || tag === 'el-footer'; }) : false; }}
这里用了一个小技巧,this.$slots.default
获取的是默认插槽中的所有 vnodes
节点,然后对他们遍历,通过 vnode.componentOptions.tag
来判断这个 vnode
是不是 或者是 。vnode.componentOptions
并不在官网 API 里,但是对于熟读 Vue 源码的人来说并不陌生。
ElHeader 组件
先来看一下模板部分:
<template> <header class="el-header"> <slot>slot> header>template>
组件会渲染成一个 标签,并通过 slot
做内容分发。
再来看一下 CSS 部分:
@include b(header) { padding: $--header-padding; box-sizing: border-box; flex-shrink: 0;}
其中 $--header-padding
是一个变量,在 packages/theme-chalk/src/common/var.scss
文件中定义。flex-shrink: 0
表示即使空间不够,也不会缩小 所占空间。
通常来说头部都会有一个固定高度,因此 允许你传入一个 height
的 props
来指定高度,如果不指定的话提供一个默认高度。
<template> <header class="el-header" :style="{ height }"> <slot>slot> header>template>
export default { name: 'ElHeader',
componentName: 'ElHeader',
props: { height: { type: String, default: '60px' } }};
由于直接通过 :style
设置的样式,所以这里传入高度的时候一定要携带单位。
ElMain 组件
先来看一下模板部分:
<template> <main class="el-main"> <slot>slot> main>template>
组件会渲染成一个 标签,并通过 slot
做内容分发。
再来看一下 CSS 部分:
@include b(main) { // IE11 supports the element partially https://caniuse.com/#search=main display: block; flex: 1; flex-basis: auto; overflow: auto; box-sizing: border-box; padding: $--main-padding;}
注意, 标签在 IE11 中是部分支持的。通常 中包裹的内容完全由它的子元素来决定,所以并不会设置高和宽,只是通过 flex:1
来分配 容器的剩余空间。
ElFooter 组件
先来看一下模板部分:
<template> <footer class="el-footer"> <slot>slot> footer>template>
组件会渲染成一个 标签,并通过 slot
做内容分发。
再来看一下 CSS 部分:
@include b(footer) { padding: $--footer-padding; box-sizing: border-box; flex-shrink: 0;}
和头部一样,通常底部也会有一个固定高度,因此 允许你传入一个 height
的 props
来指定高度,如果不指定的话提供一个默认高度。
<template> <footer class="el-footer" :style="{ height }"> <slot>slot> footer>template>
export default { name: 'ElFooter',
componentName: 'ElFooter',
props: { height: { type: String, default: '60px' } }};
ElAside 组件
先来看一下模板部分:
<template> <aside class="el-aside"> <slot>slot> aside>template>
组件会渲染成一个 标签,并通过 slot
做内容分发。
再来看一下 CSS 部分:
@include b(aside) { overflow: auto; box-sizing: border-box; flex-shrink: 0;}
组件用来渲染侧边栏,而侧边栏通常会有宽度,因此 ,允许你传入一个 width
的 props
来指定宽度,如果不指定的话提供一个默认宽度。
<template> <aside class="el-aside" :style="{ width }"> <slot>slot> aside>template>
export default { name: 'ElAside',
componentName: 'ElAside',
props: { width: { type: String, default: '300px' } }};
总结
element-ui
的 Container
布局容器组件的实现还是很简单的:创建了一些语义化的标签,利用插槽做内容分发,通过 flex 实现布局效果。
学习完这篇文章,你可以顺便对 flex 布局、HTML5 的语义化标签做一下复习,加深理解,并了解到 Vue 源码中的一些小技巧。
把不会的东西学会了,那么你就进步了,如果你觉得这类文章有帮助,也欢迎把它推荐给你身边的小伙伴。
下一篇预告 :Element-UI 技术揭秘(5)色彩、字体、边框与图标。
在这里留下你的爪印喔~
使用container的嵌套_ElementUI 技术揭秘(4)— Container 布局容器组件的设计与实现。...相关推荐
- element ui 多个子组件_ElementUI 技术揭秘(2) 组件库的整体设计
需求分析 当我们去实现一个组件库的时候,并不会一上来就撸码,而是把它当做产品一样,思考一下我们的组件库的需求.那么对于 element-ui,除了基于 Vue.js 技术栈开发组件,它还有哪些方面的需 ...
- ElementUI 布局容器Container
目录 官方地址 布局容器组件 常见布局 测试用的CSS样式 常见布局1 常见布局2 常见布局3 常见布局3 常见布局4 常见布局5 常见布局6 实例 template style js el-cont ...
- 凹凸技术揭秘 · 夸克设计资产 · 打造全矩阵优质物料
1.诞生背景 近几年围绕业务中台化的场景,涌现了很多中台,有面向开发者的,有面向产品的,有面向运营团队的,但是却缺少一个可以提供给设计师协作的中台,设计师与开发.交互的协作仍处于源文件交换的原始刀耕火 ...
- 凹凸技术揭秘 · Taro · 开放式跨端跨框架之路
承载 Web 的主战场转移 2017 年 1 月 9 日凌晨,微信正式推出小程序,为移动端家族增加了新的业务形态和玩法,当大家还在探讨这一新兴平台能做什么的时候,京东率先上线了「京东购物」小程序,随后 ...
- 优化支付服务器,技术揭秘:微信付款码是如何完成付款并优化速度的?
微信收款机具在慢速网络中快速收款的技术揭秘,小绿盒在2G网络环境下收款速度较慢,影响商户体验,我们通过网络连接优化.数据传输优化和后台逻辑优化等一系列措施,将收款耗时降低近一半,达到了业界领先水平,改 ...
- 零代价修复海量服务器的内核缺陷——UCloud内核热补丁技术揭秘
下述为UCloud资深工程师邱模炯在InfoQ架构师峰会上的演讲--<UCloud云平台的内核实践>中非常受关注的内核热补丁技术的一部分.给大家揭开了UCloud云平台内核技术的神秘面纱. ...
- 第五章 业务架构,5.3 千亿访问量下的开放平台技术揭秘(作者:风胜)
5.3 千亿访问量下的开放平台技术揭秘 前言 淘宝开放平台(open.taobao.com)是阿里系统与外部系统通讯的最重要平台,每天承载百亿级的API调用,百亿级的消息推送,十亿级的数据同步,经历了 ...
- (转) 技术揭秘:海康威视PASCAL VOC2012目标检测权威评测夺冠之道
技术揭秘:海康威视PASCAL VOC2012目标检测权威评测夺冠之道 原创 2016-09-21 钟巧勇 深度学习大讲堂 点击上方"深度学习大讲堂"可订阅哦!深度学习大讲堂是高质 ...
- 如何让机器获得幽默感——Goolge图学习技术揭秘
原文: Graph-powered Machine Learning at Google 作者: Sujith Ravi 译者: KK4SBB 责编:何永灿,关注人工智能,投稿请联系heyc@csdn ...
最新文章
- c 语言怎么编译 .dll,将你的 C 语言代码编译成 .NET
- Python中operator模块的操作
- 【STM32】FreeRTOS编码风格
- 【Linux】一步一步学Linux——runlevel命令(137)
- 微型计算机接口技术常见问题,《微型计算机接口技术及应用》期末考试试卷及问题详解(64页)-原创力文档...
- BugkuCTF-WEB题计算器
- c# 获取excel单元格公式结果_EXCEL公式解析:单元格中数字去重排序思路及公式详解...
- a标签提交form表单_Web前端开发基础知识,HTML中表单元素的理解
- jmeter 计数器的使用
- 软件质量管理体系 type:pdf_广河iso14001环境管理体系各种荣誉资质 - 广河商业服务...
- 三维交互电子沙盘在消防应急指挥部的一张图建立方案
- 联想电脑摄像头无法使用
- 音视频编解码学习详解h264 ,mpeg4 ,aac 等音视频格式
- 看板 工具_2019年14种最佳看板工具
- 知乎Redis的演进之路:从单机到2000万QPS的挑战
- Linux运维07:free命令详解
- 身份证正反面识别,身份证扫描识别,二代身份证OCR识别,OCR极速识别身份证所有信息正反面均可。离线无需联网,极速秒扫。
- gdb调试[奇牛学院]
- matlab读入excel数据
- 菜鸟的最后一篇php教程
热门文章
- UG/Open API基础知识-语法1
- 如何查看OpenCV源码
- 汇编语言(王爽第三版) 实验5编写、调试具体多个段的程序
- mipony linux客户端,Mipony网盘下载工具
- 外设驱动库开发笔记35:迪文触摸屏驱动
- 证书体系: PFX 文件格式解析
- [设计模式] ------ 观察者模式和他的升级版发布订阅模式
- 现代软件工程 结对编程 (II) 电梯调度
- python如何实现选项功能_python几种常用功能如何实现 python几种常用功能实现代码实例...
- centos7 修改为任意网卡名_centos7首次启动需要配置的内容