iView布局相关（2）

Layout组件的讲解及其源码分析

• Layout组件不止一个，而是指一类

  
  
  

  Layout组件
  
  
  

  总体布局如图所示
• 在源代码中这几个组件的分工
  • Layout组件的逻辑很简单，初始化了一个findSider方法，用来在页面加载的时候判断是否存在Sider组件。通过$children来将Layout所有一级子组件拿出来遍历判断，some方法若找到目标则停止遍历。再通过判断子组件的name是否为Sider判断是否有Sider子组件，若存在则使data中的hasSider为true，从而使名为wrapClasses的类名激活，用来进一步处理样式问题。

  findSider(){
    return this.$children.some(child => {
       return child.$options.name === 'Sider';
    });
  }
  

  • Header组件逻辑也十分简单，除了插值slot，没有别的内容，设置了样式。
  • Content组件逻辑也十分简单，与Header组件一样，设置了插值和样式名。
  • Footer组件逻辑依然十分简单，与前两者一样，仅设置了插值和样式名。
  • Sider组件比较复杂，首先我们分析props，因为自定义组件的API主要是三个部分：props、events、slots，分别用来传递属性、自定义事件、承载内容分发。
• 我们把Sider组件单独拿出来分析：
  
  

  这里第一个属性value
  
  value属性，是一个布尔值，默认是false，注释写道if it's collpased now，如果它现在是闭合的。也就是说，侧边栏的闭合折叠和展开是通过这个属性来设置的。
  
  

  这个组件监听的内容正是value值，变化会触发一个事件

常见的布局模式分析

左右布局

上下布局

这里做了一个iView布局小demo：https://github.com/AqingCyan/iView_Test。安装完依赖直接运行serve即可。