在el-input里加图标

在el-input中加入图标可以通过suffix-icon和prefix-icon属性或者slot来实现。suffix-icon和prefix-icon属性可以在input组件的首部和尾部增加显示图标，例如suffix-icon="el-icon-date"对应日期图标，prefix-icon="el-icon-search"对应搜索图标。而通过slot可以自定义图标的位置和样式，例如在搜索框头部加入图标可以使用以下代码：

<el-input v-model="queryParams.detailQuery" placeholder="可查询SAP物料号/产品名称" clearable size="small" class="search-input1" @keyup.enter.native="handleQuery" suffix-icon="el-icon-search">
  <i slot="prefix" class="el-input__icon el-icon-search"></i>
</el-input>

其中，i标签的class属性为"el-input__icon el-icon-search"，可以根据需要更改。同时，也可以通过CSS样式来调整图标的位置和样式。

相关问题

el-input修改图标位置

如果你想要修改 `el-input` 组件中的图标位置，可以使用 `append` 和 `prepend` 属性设置。这两个属性接受一个 HTML 元素作为参数，可以将这个元素放置在输入框的左右两侧。

例如，如果你想将 `el-input` 组件中的清空图标（默认在右侧）移到左侧，可以这样做：

<el-input
  v-model="inputValue"
  clearable
  :prepend="clearIcon"
></el-input>

data() {
  return {
    inputValue: '',
    clearIcon: '<i class="el-icon-circle-close"></i>'
  }
}

这里我们将清空图标作为一个 HTML 字符串保存到 `clearIcon` 变量中，并将它赋给 `el-input` 组件的 `prepend` 属性，这样清空图标就会出现在输入框左侧。

同样的，如果你想将 `el-input` 组件中的搜索图标（默认在左侧）移到右侧，可以这样做：

<el-input
  v-model="inputValue"
  :append="searchIcon"
></el-input>

data() {
  return {
    inputValue: '',
    searchIcon: '<i class="el-icon-search"></i>'
  }
}

这里我们将搜索图标作为一个 HTML 字符串保存到 `searchIcon` 变量中，并将它赋给 `el-input` 组件的 `append` 属性，这样搜索图标就会出现在输入框右侧。

el-input focus改变图标颜色

可以通过以下几个步骤来改变 `el-input` 组件中的图标颜色：

1. 在 CSS 中为 `el-input__icon` 类添加样式，例如：

.el-input__icon {
  color: red;
}

这将会为所有 `el-input` 组件中的图标添加红色。

2. 如果你只想为某个特定的 `el-input` 组件中的图标添加样式，可以为该组件添加一个唯一的 `class`，然后在 CSS 中使用该 `class` 来指定样式，例如：

<el-input class="my-input" ...></el-input>

.my-input .el-input__icon {
  color: red;
}

这将会为 `class` 为 `my-input` 的 `el-input` 组件中的图标添加红色。

3. 当 `el-input` 组件处于聚焦状态时，可以使用 `:focus` 伪类来改变图标颜色。例如：

.el-input__icon:focus {
  color: blue;
}

这将会在 `el-input` 组件聚焦时将图标颜色改为蓝色。