内容简介:最近在使用Vue+TypeScript鼓捣自己的组件库,期间参考不少(抄:joy:)按照惯例我们首先参考一下iview和element组件的接口设计, 栅格组件主要分为两个部分,行(Row)和列(Col)。没什么好说的,直接使用slot插槽,用来替换插入的Col组件。
最近在使用Vue+TypeScript鼓捣自己的组件库,期间参考不少(抄:joy:) 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 ...对应上即可
以上所述就是小编给大家介绍的《「组件」设计一款Grid组件》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!
猜你喜欢:- 「组件」设计一款Notice组件
- 「组件」设计一款Notice组件
- 「组件」设计一款Collapse组件
- React组件设计实践总结02 - 组件的组织
- React组件设计实践总结04 - 组件的思维
- React组件设计规则
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
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》 这本书的介绍吧!