无需繁琐代码！跟着我，轻松实现el-input元素内外图标嵌入！

如何在 El-input 中使用图标

在构建交互式表单时，el-input 元素可以简化任务。然而，将图标元素融入 el-input 元素中会遇到一些小困难。本文将提供一个全面的指南，展示如何在 el-input 元素中添加内嵌和外嵌图标，并为这些图标添加点击事件。

如何添加图标元素？

有几种方法可以添加图标元素，我们将重点介绍最简单、最有效的方法，这些方法适用于 Vue3 和 el-input 元素。

1. 使用插槽

插槽是 Vue3 中的一种新功能，允许在组件内部插入 HTML 元素。在这种情况下，可以在 el-input 元素内插入一个 icon 元素作为前缀或后缀图标。以下是示例代码：

<template>
  <el-input>
    <template v-slot:prefix>
      <i class="el-icon-search"></i>
    </template>
    <template v-slot:suffix>
      <i class="el-icon-close"></i>
    </template>
  </el-input>
</template>

<script>
import { ElInput } from 'element-plus';

export default {
  components: { ElInput },
};
</script>

2. 使用自定义组件

自定义组件允许创建可重用的组件，用于各种目的。可以创建自定义图标组件并将其作为 el-input 元素的子组件。以下是示例代码：

<template>
  <el-input>
    <icon name="search" slot="prefix"></icon>
    <icon name="close" slot="suffix"></icon>
  </el-input>
</template>

<script>
import { ElInput } from 'element-plus';
import Icon from './icon.vue';

export default {
  components: { ElInput, Icon },
};
</script>

如何为图标元素添加点击事件？

为图标元素添加点击事件也很容易，只需使用 v-on 指令。以下是示例代码：

<template>
  <el-input>
    <template v-slot:prefix>
      <i class="el-icon-search" @click="onSearch"></i>
    </template>
    <template v-slot:suffix>
      <i class="el-icon-close" @click="onClose"></i>
    </template>
  </el-input>
</template>

<script>
import { ElInput } from 'element-plus';

export default {
  components: { ElInput },
  methods: {
    onSearch() {
      // 在这里编写您的搜索逻辑
    },
    onClose() {
      // 在这里编写您的关闭逻辑
    },
  },
};
</script>

总结

通过本指南，您已了解如何在 el-input 元素中添加内嵌和外嵌图标，以及如何为这些图标添加点击事件。这些技巧可以极大地增强表单的美观性和可用性。

常见问题解答

1. 如何使图标在输入框中垂直居中？

   • 对于内嵌图标，可以使用 vertical-align CSS 属性。对于外嵌图标，可以使用 align-self CSS 属性。

2. 如何在图标上添加工具提示？

   • 使用 title 属性或 v-tooltip 指令。

3. 如何使用不同颜色的图标？

   • 使用 color CSS 属性或 el-icon 组件的 color prop。

4. 如何将图标禁用？

   • 为 el-input 组件添加 disabled 属性。

5. 如何使图标响应式？

   • 使用媒体查询或 CSS 变量来调整图标的大小和位置。