「组件」设计一款Grid组件

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

API设计

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

Row

模版设计

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

Props.gutter

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

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

findChildsComponentByLevel， 会查找指定组件的指定名称的子组件，并且可以指定查找的层级 。 findChildsComponentByLevel方法主要利用的是组件实例的 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 ...对应上即可