el-input修改图标

`el-input`是Element UI框架中的输入组件，用于创建简单的文本输入字段。它提供了一些预设的样式，并允许用户自定义部分元素，如输入框前后的图标。

在`el-input`中修改图标有两种常见的方式：

### 1. 使用内联CSS自定义图标样式

你可以在`el-input`组件上直接添加`<i>`标签作为图标，并通过内联CSS来定制这个图标的样式。例如：

<el-input placeholder="请输入内容">
  <template #append>
    <i class="el-icon-search" style="color: red; font-size: 16px;"></i>
  </template>
</el-input>

在这个例子中，我们在`<template #append>`中插入了一个红色的心形图标，并设置了一些基本的样式属性，如颜色和字体大小。

### 2. 使用插槽动态加载图标

另一种更灵活的方式来替换或自定义`el-input`图标的是利用插槽功能。你可以将图标作为子组件或元素放在对应的插槽中。例如：

<el-input placeholder="请输入内容">
  <!-- 添加清空按钮 -->
  <template #prepend>
    <span><i class="el-icon-close"></i></span>
  </template>
  
  <!-- 添加搜索图标 -->
  <template #append>
    <button @click="handleSearchClick"><i class="el-icon-search"></i></button>
  </template>
</el-input>

<script>
export default {
  methods: {
    handleSearchClick() {
      // 这里可以写点击事件的操作
      console.log('Search button clicked');
    }
  }
}
</script>

在这里，我们利用了`#prepend`和`#append`插槽分别添加了清除输入项和执行搜索操作的图标按钮。这种方式使得图标不仅是静态的，而是可以响应用户的交互操作。

### 相关问题:

1. **如何自定义 `el-input` 的提示信息显示位置**?
- 可以通过`prefix-class`和`suffix-class`自定义前缀和后缀元素，并使用CSS来定位这些元素的位置。

2. **如何在 `el-input` 中加入实时验证并改变输入框边框颜色**?
- 利用Element UI提供的`validate-event`或自定义Vue侦听器来检测输入值是否满足规则，然后通过CSS更改输入框边框的颜色。

3. **`el-input` 是否支持动态加载图标资源**?
- Element UI默认不支持直接动态加载图标资源。通常需要通过模板内的HTML结构或使用前端库如Iconfont、Font Awesome等外部图标库来实现动态加载图标。