vue elementUI el-input的click事件与清空按钮的事件冲突问题解决

在Vue中使用elementUI的el-input组件时，如果你想要绑定一个点击事件并处理点击动作，同时又想要使用内置的清空按钮，可能会遇到事件冲突的问题。这是因为清空按钮会触发输入框的blur事件，导致你的点击事件无法正常触发。

为了解决这个问题，你可以使用Vue的事件修饰符.native来直接绑定原生事件，或者使用定时器来延迟清空按钮的事件处理。

下面是使用.native修饰符的例子：

<template>
  <el-input
    v-model="inputValue"
    placeholder="请输入内容"
    @click.native="handleClick"
  ></el-input>
</template>
 
<script>
export default {
  data() {
    return {
      inputValue: ''
    };
  },
  methods: {
    handleClick() {
      console.log('Input clicked');
    }
  }
};
</script>

如果你选择使用定时器，可以在清空按钮的事件处理中设置一个小的延迟，例如50ms，这样就可以在清空操作完成之前触发点击事件。

<template>
  <el-input
    v-model="inputValue"
    placeholder="请输入内容"
    @click="handleClick"
  ></el-input>
</template>
 
<script>
export default {
  data() {
    return {
      inputValue: ''
    };
  },
  methods: {
    handleClick() {
      // 使用定时器来确保点击事件在清空事件触发之前被处理
      setTimeout(() => {
        console.log('Input clicked');
      }, 50);
    }
  }
};
</script>

选择哪种方法取决于你的具体需求和用户体验的优先级。使用.native修饰符通常更简单直接，而使用定时器则可以更精细地控制事件的触发时机。