内容简介:所谓布局容器,就是页面的整体结构,一般来说就是容器,里面才是上面4个子组件且只能是上面4个之一,下面依次分析每个组件的源码顾名思义,它是一个容器组件,承载子组件,容器组件应该有什么样的特性,无非就是块状,高度自适应等,Element加了一条规则:当子元素中包含
所谓布局容器,就是页面的整体结构,一般来说就是 <header>,<footer>,<aside>,<main>
等构成的页面总体架构,官网的示例图如下
container
容器,里面才是上面4个子组件且只能是上面4个之一,下面依次分析每个组件的源码
Container组件
顾名思义,它是一个容器组件,承载子组件,容器组件应该有什么样的特性,无非就是块状,高度自适应等,Element加了一条规则:当子元素中包含 <el-header>
或 <el-footer>
时,全部子元素会垂直上下排列,否则会水平左右排列,这是不是很神奇,下面上代码来探究一下原理,代码 点此
<template> <section class="el-container" :class="{ 'is-vertical': isVertical }"> <slot></slot> </section> </template> <script> export default { name: 'ElContainer', //自定义属性,其他组件会用到 componentName: 'ElContainer', props: { direction: String }, 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; } } }; </script> 复制代码
这就是一个典型的单文件vue组件形式,只不过样式部分被分离出去了,首先来看 template
部分,发现其实就是 <section>
的封装而已,后面的组件也都采用了利于SEO的语义化tag标签而不是div,其实它们本质上就是块状元素,功能和div是一样的,注意 <section>
里面的 <slot>
,这就是承载子组件的插槽,如果不写则将会没有任何子元素,且是一个匿名插槽,接下来我们来看样式, el-container
这个类
@import "mixins/mixins"; @include b(container) { display: flex; flex-direction: row; flex: 1; flex-basis: auto; box-sizing: border-box; min-width: 0; @include when(vertical) { flex-direction: column; } } 复制代码
可以看出 <section>
其实是flex布局,且默认方向为横向,其中 flex-basis:auto
设置其基准长度为自适应,这里的 flex:1
表示如果container被父container包围,那么它会分配剩余的宽或高
然后我们来看js部分, isVertical
是一个计算属性,首先判断是否有 direction
属性,如果有则直接返回水平还是垂直方向布局,如果没有则通过判断子元素来确定布局方向,重点就是这里的代码了
isVertical() { ... 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; } 复制代码
它是一个3元运算符,首先判断 this.$slots&& this.$slots.default
,如果不存在直接返回false,不存在的情况就是子元素为空。 this.$slots
是组件的实例属性,组件是可复用的Vue的实例,和 new Vue()一样是实例,因此有以下属性
this.$slots.default
返回了所有没有被包含在具名插槽中的子元素,如果这些子元素存在,那么开始依次遍历这些子元素,注意
some
高阶函数的使用,这里就是要在所有子元素中查看是否存在
<el-header>
或者
<el-footer>
,
some
所遍历的数组只要有一个为true,则整体返回true,否则为false,而
every
则是要所有都是true才返回true,这里的高阶函数简化了代码量,如果用一般的for循环显得不那么优雅
接下来是如何判断子元素是 <el-header>
或者 <el-footer>
,这里首先要明确 this.$slots.default
是个数组,里面的每个元素都是一个 VNode
, VNode
是虚拟dom中的虚拟节点,当组件被编译时,每个 <...>
就会生成一个虚拟的节点,大致结构如下图
componentOptions
里面才包含元素的tag名称,注意VNode的tag不是我们想要的,进入Vue源码查找相关代码
const vnode = new VNode( `vue-component-${Ctor.cid}${name ? `-${name}` : ''}`, data, undefined, undefined, undefined, context, { Ctor, propsData, listeners, tag, children }, asyncFactory ) 复制代码
发现第一个参数就是tag,其实是有前缀的,而 componentOptions
是 { Ctor, propsData, listeners, tag, children }
这么个对象,代表组件选项属性,这里面的tag才是我们想要的,打印出VNode证明了上面的说法
因此这里给我们一个怎么判断子元素类型的一个启发方法,可以借鉴。综上,这个计算属性的函数就能够通过子元素来判断自身flex的布局方向了
Footer组件
由于剩下的组件都很相似,这里就分析一个 Footer
,代码如下
<template> <footer class="el-footer" :style="{ height }"> <slot></slot> </footer> </template> <script> export default { name: 'ElFooter', //自定义属性,便于其他组件获取该组件的名称 componentName: 'ElFooter', props: { height: { type: String, default: '60px' } } }; </script> 复制代码
由此可见仍然是封装了原生的 <footer>
,并有一个默认高度,footer本质上就是一个块状元素而已,下面来查看scss代码
@import "mixins/mixins"; @import "common/var"; @include b(footer) { padding: $--footer-padding; box-sizing: border-box; flex-shrink: 0; } 复制代码
注意 flex-shrink:0
这个代码,这表示当父容器宽度不够时,footer不会收缩而是保持原本的宽度,也就是说footer是永远不会被压缩,就算超出容器。 flex-shrink
默认为1,也就是所有元素等比例收缩,对于下图这种形式的布局
flex-shrink
都是0,也就是不会压缩,而main中的代码
flex:1
表示了只有main会被压缩或者扩张,flex:1是
flex:grow:1,flex:shrink:1,flex-basis:auto
的简写,又因为
flex:grow
默认值为0,所以只有main会被压缩或扩张,header和footer都不变
总结
综上,整个布局其实就是对原生的封装,主要就是 container
的处理,如果浏览器不支持flex,则上述布局无效
以上所述就是小编给大家介绍的《Element源码分析系列2-Container(布局容器)》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!
猜你喜欢:- Spring源码探究:容器
- springMVC容器加载源码分析
- Spring容器创建源码解析
- 详解CopyOnWrite容器及其源码
- stl 源码阅读之容器vertor
- Spring源码解析:高级容器的扩展内幕
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
小团队构建大网站:中小研发团队架构实践
张辉清 等 / 电子工业出版社 / 2019-1 / 69
《小团队构建大网站:中小研发团队架构实践》结合作者近几年的工作经验,总结了一套可直接落地、基于开源、成本低、可快速搭建的中小研发团队架构实践方法。《小团队构建大网站:中小研发团队架构实践》共5篇22章,开篇是本书的导读;架构篇是设计思想的提升,包括企业总体架构、应用架构设计、统一应用分层等;框架篇主讲中间件和工具的使用,包括消息队列、缓存、Job、集中式日志、应用监控和微服务等;公共应用篇是技术与......一起来看看 《小团队构建大网站:中小研发团队架构实践》 这本书的介绍吧!