el-input输入框的小图标加颜色

`el-input`组件是Element UI库中的一个用于输入文本的组件，在Vue.js中，如果你想给输入框添加小图标并着色，你可以通过CSS样式来实现。首先，你需要在HTML结构中为输入框添加一个`<i>`元素作为图标：

<template>
  <el-input v-model="inputValue" placeholder="请输入">
    <i class="iconfont" :class="{ 'icon-color': isIconColored }"></i>
  </el-input>
</template>

然后，你可以创建一个`.icon-color`类，并设置其背景颜色（这里假设是红色）:

.el-input__icon {
  display: inline-block;
  width: 16px; /* 或者你想要的实际宽度 */
  height: 16px; /* 同上 */
  background-color: red; /* 你可以在这里更改颜色 */
}

/* 使用伪元素来改变鼠标悬停状态 */
.el-input__icon.icon-color:hover {
  background-color: darkred;
}

`isIconColored`是一个Vue实例数据属性，你可以根据需要动态控制是否显示彩色图标：

export default {
  data() {
    return {
      inputValue: '',
      isIconColored: false, // 默认为无颜色
    };
  },
  methods: {
    toggleColor() {
      this.isIconColored = !this.isIconColored;
    }
  }
}

最后，你可以为用户操作添加一个事件处理函数，比如点击时切换颜色：

<template>
  ...
  <span @click="toggleColor()" class="toggle-icon">...</span> <!-- 根据需求添加按钮或其他触发方式 -->
</template>

<script>
...
methods: {
  toggleColor() {
    this.isIconColored = !this.isIconColored;
  }
}
</script>