怎么解决el-input中clearable为true时处理clear事件时blur同时触发
时间: 2024-02-20 11:58:36 浏览: 217
当 el-input 组件的 clearable 属性为 true 时,点击清空按钮会触发 clear 事件,但同时也会触发 blur 事件,导致一些不必要的问题。为了解决这个问题,可以在 clear 事件处理函数中使用 setTimeout 函数将 blur 事件的触发延迟一段时间,让 clear 事件先执行完毕,如下所示:
```html
<el-input v-model="inputValue" clearable @clear="onClear"></el-input>
```
```javascript
methods: {
onClear() {
setTimeout(() => {
// do something else
// ...
}, 100);
}
}
```
在上面的代码中,使用了一个延迟时间为 100 毫秒的 setTimeout 函数来延迟 blur 事件的触发,这样就可以保证 clear 事件先执行完毕,再触发 blur 事件,避免了一些不必要的问题。
相关问题
el-input中clearable为true时点击清空会先处理clear事件,后面再点击任意地方则会触发blur事件,怎么避免blur事件在这种情况下触发
可以通过在 clear 事件中使用 `event.stopPropagation()` 方法来阻止点击 clear 按钮时触发的 click 事件继续冒泡到 el-input 上,从而避免触发 blur 事件。具体做法是,在 el-input 绑定 clear 事件,在事件处理函数中调用 `event.stopPropagation()` 方法,如下所示:
```html
<el-input v-model="inputValue" clearable @clear="onClear"></el-input>
```
```javascript
methods: {
onClear(event) {
event.stopPropagation();
// do something else
// ...
}
}
```
这样,当用户点击清空按钮时,就不会触发 click 事件继续冒泡到 el-input 上,从而避免了触发 blur 事件的问题。
el-input中clear如何不触发click事件
要实现在el-input中点击清除按钮不触发click事件,可以使用以下方法:
1. 使用 @mousedown.prevent 替代 @click 事件来禁止默认行为。如下所示:
```html
<el-input v-model="input" clearable @mousedown.prevent="clearInput"></el-input>
```
```javascript
methods: {
clearInput() {
this.input = '';
}
}
```
2. 在方法中使用 $refs 获取清除按钮元素,并使用 .blur() 方法使其失去焦点。如下所示:
```html
<el-input v-model="input" clearable @click="clearInput"></el-input>
```
```javascript
methods: {
clearInput() {
this.$refs.input.$refs.clearable.blur();
this.input = '';
}
}
```
这样就可以实现在点击清除按钮时不触发click事件。
阅读全文