「组件」设计一款Grid组件

前言

最近在使用Vue+TypeScript鼓捣自己的组件库，期间参考不少（抄?）element，iview的源码。发现了一些常用的功能的背后，往往是复杂的实现。于是准备写一系列文章，介绍这些组件背后的原理。今天是第二篇，手把手带你实现Grid组件。

API设计

按照惯例我们首先参考一下iview和element组件的接口设计, 栅格组件主要分为两个部分，行（Row）和列（Col）。

Row组件Props	解释
gutter	每一列之间的间距，指定像素。

Col组件Props	解释
span	列的宽度，通常是1～24之间的数字
offset	指定列的偏移量

Row

模版设计

没什么好说的，直接使用slot插槽，用来替换插入的Col组件。

Props.gutter

Props.gutter是每一列的栅格间距，按道理说每一列的栅格间距应该是Col的属性，但是为了方便起见，不可能为每一个Col组件设置gutter的属性。所以统一设置在Row组件上，那我们如何将Row上的属性，设置到Col上呢？

我们首先定义两个工具函数，代码如下：

findChildsComponentByLevel，会查找指定组件的指定名称的子组件，并且可以指定查找的层级。
findChildsComponentByLevel方法主要利用的是组件实例的$children属性，和$options.name属性。$children属性表示**当前实例的直接子组件**。而$options.name则表示组件初始化时指定的name属性。在工具函数的内部利用递归的形式，向下按层级查找特定名称的子组件。

findChildsComponentByFirstLevel方法则是对findChildsComponentByLevel方法的封装，用来查找第一层子组件。

我们在组件内部定义了handleGutterChange方法，并使用watch监听gutter属性的变化，每一次gutter变化的时候，都会通过handleGutterChange方法，将gutter属性更新到col组件上。

Col

模版设计

比较简单这里不在赘述

Data.gutter

我们在Row组件中，通过查找$children的方法，将gutter属性更新到了Row组件上。

在Row组件内部，利用计算属性，监听缓存计算gutter属性。并将对应gutter转换为对应的样式，更新到Row组件的:style属性上。实现gutter功能。

offset, span

offset, span的实现，是单纯依靠css实现的。使用less的循环递归

形成row-span-1, row-span-2, row-span-3, row-span-4……的css类。然后使用less内置percentage函数，动态的生成css的width属性。

最后我们只需要通过计算属性，动态的生成col的css类名，与row-span-1，row-span-2，row-span-3……对应上即可

参考

• iview源码
• element源码