首先,iView 非常值得肯定,它功能还算比较全,组件比较多,是一个大的 UI 库;
之前和同事开发了一个中台组件库 jrv-vue ,用于公司内部系统的开发,封装了一些常用组件;目前开发内部项目,我基本都会用这个库;上个项目尝试使用 iView(版本是3.4.0),直到后来发现一个 bug,就果断放弃了;
下面列出这次使用过程中依次发现的问题:
1、基本没考虑语义化
这个不算 bug,如果没有其他功能性 bug,可以忍;
2、细节处理不到位
上面两个图中的第一个复选框,控件周围的阴影,是Mac下,浏览器对 input 激活状态的渲染,在一个简洁风格的系统里,这种细节非常致命,非常丑;但终归不是功能性 bug,还是可以忍;
可以通过覆盖样式来优化,iView 是将 input 的 opacity 设置为0,当然会出现激活的样式啦,把 input display: none 掉就好了,测试好像也没啥问题;
3、第一个 bug
复现:以实际业务来说吧,页面上删除一条记录时,需要先提示是否确认删除,如果选“是”,调用接口进行删除,删除完成,提示用户删除结果;使用 iView 的 Modal 处理时,如果接口响应时间比较短,点击确认弹框的“是”之后,第二个提示弹框会一闪就消失;
代码是这样,用定时器代表了请求接口的过程:
this.$Modal.confirm({
title: '确定要删除该记录吗?',
onOk: () => {
setTimeout(() => {
this.$Modal.error({title: '删除失败,请重试'});
}, 200);
},
onCancel: () => {
}
});
这个 bug,直接影响到了业务逻辑,之前在开发移动端页面的时候遇到过,出现的原因大体是这样:
一个动态生成的弹框,加了显示隐藏的动画效果;
一开始弹框已经显示出来了,然后调用隐藏方法,在隐藏过程中,动画未完成时,又调用了显示方法,执行显示方法的逻辑,显示弹框;
隐藏的动画回调完成时,里边的逻辑是移除整个弹框的html元素,移除了元素,显示的弹框就消失了;