el-input中点击清空按钮如何不触发click事件
时间: 2023-11-07 07:13:17 浏览: 104
vue中el-input绑定键盘按键(按键修饰符)
要实现在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事件。
阅读全文