「组件」设计一款Grid组件

栏目: Html · 发布时间: 5年前

内容简介:最近在使用Vue+TypeScript鼓捣自己的组件库,期间参考不少(抄:joy:)按照惯例我们首先参考一下iview和element组件的接口设计, 栅格组件主要分为两个部分,行(Row)和列(Col)。没什么好说的,直接使用slot插槽,用来替换插入的Col组件。
「组件」设计一款Grid组件

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

API设计

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

「组件」设计一款Grid组件
Row组件Props 解释
gutter 每一列之间的间距,指定像素。
Col组件Props 解释
span 列的宽度,通常是1~24之间的数字
offset 指定列的偏移量

Row

模版设计

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

「组件」设计一款Grid组件

Props.gutter

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

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

「组件」设计一款Grid组件

findChildsComponentByLevel, 会查找指定组件的指定名称的子组件,并且可以指定查找的层级 。 findChildsComponentByLevel方法主要利用的是组件实例的 options.name属性。

$children属性表示 当前实例的直接子组件

而$options.name则表示组件初始化时指定的name属性。

在工具函数的内部利用 递归 的形式,向下按层级查找特定名称的子组件。

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

「组件」设计一款Grid组件

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

Col

模版设计

比较简单这里不在赘述

「组件」设计一款Grid组件

Data.gutter

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

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

「组件」设计一款Grid组件

offset, span

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

「组件」设计一款Grid组件

形成 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 ...对应上即可

「组件」设计一款Grid组件

以上所述就是小编给大家介绍的《「组件」设计一款Grid组件》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

The Zen of CSS Design

The Zen of CSS Design

Dave Shea、Molly E. Holzschlag / Peachpit Press / 2005-2-27 / USD 44.99

Proving once and for all that standards-compliant design does not equal dull design, this inspiring tome uses examples from the landmark CSS Zen Garden site as the foundation for discussions on how to......一起来看看 《The Zen of CSS Design》 这本书的介绍吧!

CSS 压缩/解压工具
CSS 压缩/解压工具

在线压缩/解压 CSS 代码

图片转BASE64编码
图片转BASE64编码

在线图片转Base64编码工具

URL 编码/解码
URL 编码/解码

URL 编码/解码