「组件」设计一款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方法主要利用的是组件实例的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源码