说在最前面—实测iview有一定的内存泄漏的问题,但并不严重,公司内部项目自己覆盖了select组件来解决了这个问题。

        虽然说这个组件库一些问题,不过作为学习vue以来使用的第一个组件库,对我的帮助还是很大的,另一方面也要归功于他的设计有许多地方无法满足公司业务需求,导致我经常需要去看iview的源码来想办法覆盖iview组件以实现自己的需求。不过他的设计还是值得学习的,我们在设计组件的时候依然可以参考他的设计方式。接下来就总结(吐槽)一下最近在项目中碰到问题以及解决方案。

1、Input

最常用的莫过于输入框Input了,大部分都是和form一起使用,他的clearable属性问题比较大。

一 是没有clear的事件,业务中有一个需求是清空输入框后重新搜索,这里我们也只能监听change事件判断值为空时搜索。

第二个问题就是clearable的时候,使用disabled禁用输入框的clear的按钮却没有被禁用,依然可以点击叉清空输入框,需要手动控制cleaeable为false。

 

2、InputNumber

一没有enter事件,按下回车后进行搜索这个功能就比较麻烦,原来是在外层套一层span在span上加keyup事件,后来发现有更加优秀的办法就是就用native事件,native修饰符会把事件添加到组件的最外层元素上作为原生事件,这么以来觉得input的on-enter有点多余了。

二 精度问题,理想状态是输入框失去焦点后进行四舍五入,但是他这输入框一变化就开始四舍五入,导致用户体验很差,目前都是自己写blur事件手动控制精度,parser和formatter也不好用,行为不好控制。

三 增减按钮没有属性控制开启或关闭,不需要时需要手动覆盖样式display:none

四 没有clearable和input不统一,现在也没有解决

五 没有前后插槽,单位百分号等都是用绝对定位定过去的(parser和formater不好用)

3、Select

select没多少问题,注意多选和远程搜索可以同时使用,唯一的问题多选时样式

还有就是当里面已经有选项,直接复制文字进去文字的位置被label盖住了,这个目前还没有解决

4、form表单

表单的验证是一个难点,在实际场景中,验证逻辑千变万化。复杂一点和需要后端验证的都要用自定义的验证器。

一 循环出来的表单元素的验证,用下图的方式

二 强行触发一个表单元素的验证并且用传入值来验证

三 自定义错误提示

iview的form里错误提示只能是文本,并且高度是固定的,当错误提示比较复杂甚至需要有交互效果时,用view自带的错误提示是无法实现的目前有两种情况

1 验证错误提示超过两行

将原来的固定高度改为自动扩展,根据实际情况调整间距

2  错误提示里有按钮可以点击

将show-message置为false,自己插入错误提示,这里实际上把iview的FormItem代码直接复制了一部分出来进行了修改,主要是为了样式保持一致。

5 Cascader 级联选择框

级联选择框的问题在于,iview对于下拉列表是用v-show控制的,如果数据量较大如全国的地区,会导致页面加载很慢(2-3秒),

现在是把iview的cascader拷贝了一份下来,修改里面的三个v-show为v-if,让下拉框不在页面加载时就渲染出来

6 Table 

table最大的问题就是内存泄漏,每次有table的页面进入后,浏览器的内存占用量就会上升很多而且不会被垃圾回收掉,这个问题还有没有结果。项目过程中遇到过一次进入列表后自动弹出列表的侧弹窗详情,查看源码后发现table内部实际上有点击某行的方法clickCurrentRow,解决方法如下。

 

7 DropDown

dropdown最难受的地方在于他的DropdownItem没有点击事件,虽然说在模板里可以用native事件,但是在render函数里没办法使用native修饰符(可能目前还不知道),所以只能在外面包了一层div,在div上写事件

Logo

前往低代码交流专区

更多推荐