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,好使了~!