[apex-ui]快应用常用组件开发-图标和表单

dadong

快应用常用组件开发-图标和表单

承接上一篇构建组件库的文章，这篇详细讲一讲组件的开发过程和一些骚操作。

自定义组件

快应用的组件化做得是比较精简的，一个组件的实现和一个页面基本一致，自定义组件和页面的区别在于多了一些属性，少了一些生命周期的钩子。

多的属性是你可以向组件内传递数据的参数，可以用下面这种方式：

你可以把要传递进组件的属性在props这个数组中声明，不过要注意命名方式：声明属性要采用驼峰命名，在外部调用组件时要把驼峰转换成分隔线。以上面为例，调用组件时应该写成prop-one。

调用方式如下所示：

如果你要为传入的属性设置默认值，可以采取下面的方式声明：

图标组件开发和实现

了解了怎么写一个自定义组件，现在我们来实现一个图标库的组件，这在我们前端开发中是一个很常用的组件。

第一步：制作字体图标文件

制作字体图标文件有个很方便的在线工具：icomoon，网站的操作简便，容易上手，这里不重复说明。

第二步：准备好图标库组件的代码

我这里有写好的组件代码，大家拷贝过去修改一下字体图标的路径就可以直接使用，不过有几点需要注意的地方，在下面说明：

• 字体图标只能用于text标签，其他标签不会显示；
• 字体图标通过@font-face引入；
• 字体图标需要使用html实体来使用，这是因为快应用不支持伪类导致的，所以一定要保存从icomoon上下载下来的字体图标包和网站上图标库项目，不然没法看到图标对应的html实体值；

做好上面的几点，我们的字体图标组件基本就可用了，代码大概长成下面这样：

第三步：优化调用方式

通过上面的方式，在icon变多的时候，会增加很多text标签，组件的代码会变得很多，也不利于维护和阅读，所以得想个办法，把代码优化一下，你可能很自然就会想到，让type变量直接接收传入的图标对应的html实体值不就好了。就像下面这样：

如果你把上面的代码跑起来，会发现图标根本不会显示，而且就算能显示，在调用的时候你还得去查一遍图标库，看看要用的图标对应的html实体值，代码的可阅读性也会有所降低，所以这时候，还得有一个骚操作，代码如下：

上面代码中，我们新增了一个方法unescapeFontIconCode，这个方法返回unescape后的字符实体值，这样在text中，图标就能正常显示了；同时，我们还新增了一个iconMap变量，用来保存icon的字符实体值，同时给每个对应的图标取一个可读性更高的别名，方面我们的调用，也增加了在调用时代码的可读性，一眼就能看出是什么图标。

到此，图标组件我们就编写完了，当然你还可以根据自身业务开发的需求，为这个图标组件增加更多定制化的属性或者方法。

表单组件开发和实现

接下来，我们再做一个表单组件的开发，此处以单选框为例。单选框组件一般会多个配合使用，所以我们这个组件实际上可以拆分成两个不同功能的部分来实现：一部分是单个单选框组件，一部分是多个单选框组件同时使用的时候的group组件。下面一个一个来。

radio组件实现如下：

​ ​ ​

这个组件的实现需要注意的有一下几点：

• 需要单独在组件内监测某几个传入值的变化；
• 单选框点击事件内需要判断当前的组件是否处于一个单选框组（radio-group）中，这里用到的判断方法主要是这一句代码const parent = this.$parent().$child(this.group)。

下面是radio-group组件的实现方法：

​ ​

单选框组的实现相对单选框就简单多了，不过有个需要之一的地方就是，如何获取slot中的元素，从而判断哪一个单选框是当前选中的，同时也保障一个组内有且仅有一个处于选中状态，这里用了一些hack的办法实现，也是官方文档中没有说明的方式。

关键代码是这两句：

let items = this.$child('radio-group')._slot.childNodes[0].childNodes; // 获取当前组内的单选框组件 ​ item._vm.changeCurrent(val === item._vm.value); // 访问组内单选框组件的方法

另外：目前在快应用中只支持一个slot标签。

尾声

以上讲解了快应用自定义组件的开发方法，以及分析了两个常用组件的代码实现，你也可以试着自己实现一遍，看有没有更好的方法，这两个组件都是快应用开源组件库[url=" style=]apex-ui[/url]中的组件，如果你有更好的方法，欢迎提issue，pr。