请选择 进入手机版 | 继续访问电脑版
 找回密码
 立即注册
搜索

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

0
回复
934
查看
[复制链接]

11

主题

87

帖子

795

积分

 楼主| 2019-7-23 19:44:53 显示全部楼层 |阅读模式
快应用常用组件开发-图标和表单
承接上一篇构建组件库的文章,这篇详细讲一讲组件的开发过程和一些骚操作。
自定义组件
快应用的组件化做得是比较精简的,一个组件的实现和一个页面基本一致,自定义组件和页面的区别在于多了一些属性,少了一些生命周期的钩子。
多的属性是你可以向组件内传递数据的参数,可以用下面这种方式:
你可以把要传递进组件的属性在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。
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册