Vue3实现element的input输入时的icon图片的绑定事件

 

1. 自定义插槽： 我们使用了 suffix 插槽来自定义后缀内容。
2. 图标元素： 在插槽内，我们手动添加了 <i> 标签，并指定了 el-icon-search 作为类名以显示搜索图标。
3. 点击事件： 在 <i> 标签上绑定了 @click 事件监听器，当点击图标时会触发 handleIconClick 方法。
4. 样式： 为图标添加了 cursor: pointer; 样式，使其在鼠标悬停时显示为指针手势，提示用户图标是可点击的。

 最初我想要实现给图标设置一个点击事件

可是发现 :suffix-icon="Search"无法直接绑定事件

 <el-input
      v-model="input1"
      style="width: 240px"
      size="large"
      placeholder="Please Input"
      :suffix-icon="Search"
    />

 所以可以通过自定义插槽的方式来实现，所以我们需要手动添加图标，并使用插槽提供的方式来绑定事件。

<template>
    <div class="item-search">
    <el-input
        v-model="input1"
        style="width: 86vw"
        size="large"
        placeholder="Please Input"
    >
<!--      :suffix-icon="Search"-->
      <template #suffix>
        <!-- 包裹图标的容器，方便绑定点击事件 -->
        <i class="el-icon-search" @click="handleClick"><el-icon><Search /></el-icon></i>
      </template>
    </el-input>
  </div>
</template>

<script>
import {ref} from "vue";

export default {
  setup() {
    const input1 = ref('');

    const handleClick = () => {
      console.log('Suffix icon clicked');
    };

    return {
      input1,
      handleClick
    };
  }
};
</script>

<style>
.item-search{
  width: 100vw;
  height: 80vh;
  display: flex;
  justify-content: center;
  align-items: center;
}
.el-icon-search {
  cursor: pointer;
}
</style>