iview--使用总结

说在最前面—实测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上写事件