在 el-input 组件中,clear 按钮是被作为 el-input 的内容,并且触发 click 事件是通过监听 el-input 上的 click 事件实现的。
如果你想在点击 clear 按钮时不触发 el-input 的 click 事件,你可以使用事件冒泡的特性来解决。事件冒泡指的是,当一个元素的事件被触发时,这个事件会先从这个元素开始向外传播,依次冒泡到它的父元素、祖先元素等。
所以,你可以在 clear 按钮的 click 事件处理函数中调用 event.stopPropagation() 方法,来阻止事件冒泡。这样,当 clear 按钮被点击时,el-input 的 click 事件就不会被触发。
示例代码如下:
<template>
<el-input v-model="value" @click="onInputClick" clearable @clear="onClearClick"></el-input>
</template>
<script>
export default {
data() {
return {
value: '',
};
},
methods: {
onInputClick() {
console.log('Input clicked');
},
onClearClick(event) {
console.log('Clear clicked');
// 阻止事件冒泡
event.stopPropagation();
},
},
};
</script>
在上面的代码中,当 clear 按钮被点击时,onClearClick 方法会被调用,在这个方法中调用了 event.stopPropagation() 方法来阻止事件冒泡,所以 el-input 的 click 事件不会被触发。