el-input中clear如何不触发click事件
在Element UI的el-input
组件中,如果你想要禁用清空按钮的点击事件,可以通过自定义清空按钮的方式来实现。你可以使用suffix
插槽来自定义清空按钮,并且不绑定点击事件。
下面是一个例子:
<template>
<el-input
v-model="inputValue"
placeholder="请输入内容"
clearable
:suffix-icon="inputValue ? 'el-icon-close' : 'el-icon-circle-close'"
@click.native="handleClick"
@clear="handleClear"
>
<template #suffix>
<i
v-if="inputValue"
class="el-icon-close"
@click.stop.prevent="inputValue = ''"
></i>
</template>
</el-input>
</template>
<script>
export default {
data() {
return {
inputValue: '',
};
},
methods: {
handleClick(event) {
// 处理点击事件
},
handleClear() {
// 清空输入时的处理逻辑,但不会被调用
},
},
};
</script>
在这个例子中,我们使用了@click.stop.prevent
来阻止点击事件冒泡和默认行为。这样一来,清空按钮就会被自定义,点击它不会触发el-input
的清空事件,也不会触发原有的点击事件。
评论已关闭