记一次修改 iview 输入框清空数据后失去焦点的问题修复

1,192 阅读1分钟

iview 是一个基于 vue 实现的不错的组件库,但是其 input 输入组件拥有一个特殊的效果,不同于element 的 input 组件,element 的输入框,用户在点击清空按钮时,假如已经聚焦在这个输入框,那么就算点击了清空按钮,焦点依旧会在这个输入框,但是 iview 的输入框会在用户点击清除图标后,自动失去焦点,不管你之前是否选中该输入框,用户体验度欠佳。具体效果参考 iview input框


下面我们就来对这个效果进行下修复,通过 iview 的官网,我们知道,iview 的 input 组件自带一个 focus 方法

方法名说明参数
focus手动聚焦输入框,详见示例Object 4.5.0

并且还有暴露一个 on-clear 事件

事件名说明返回值
on-clear 3.4.0开启 clearable 时可用,点击清空按钮时触发

iview 暴露的这两个方法让人不得不怀疑,就是想让用户自己去修复这个 bug,

说干就干,我们这就来进行修复, duang,好使了~!