input按钮里面放图标

可以使用HTML和CSS来实现在input按钮里面放置图标。以下是一个简单的示例：

HTML代码：

<input type="submit" value="提交">

CSS代码：

input[type="submit"] {
  background-image: url("icon.png");
  background-position: center;
  background-repeat: no-repeat;
  padding-left: 20px; /* 设置图标与文字之间的间距 */
}

其中，`background-image`属性用于设置背景图片，`background-position`属性用于设置图片在按钮中的位置，`background-repeat`属性用于设置图片是否重复，`padding-left`属性用于设置图标与文字之间的间距。

相关问题

Vue2项目对el-input进行封装，要求搜索框里面左边是搜索图标右边是搜索按钮

你可以封装一个 `SearchInput` 组件来实现这个功能。这个组件可以接受 `value` 和 `placeholder` 两个 props，分别表示搜索框的值和占位符。在组件的模板中，你可以使用 `el-input` 和 `el-button` 组件来实现搜索框的样式。具体代码如下：

<template>
  <div class="search-input">
    <el-input v-model="searchValue" :placeholder="placeholder" prefix-icon="el-icon-search" @keyup.enter.native="search"/>
    <el-button type="primary" icon="el-icon-search" @click="search"></el-button>
  </div>
</template>

<script>
export default {
  name: 'SearchInput',
  props: {
    value: {
      type: String,
      default: ''
    },
    placeholder: {
      type: String,
      default: '请输入搜索内容'
    }
  },
  data () {
    return {
      searchValue: this.value
    }
  },
  methods: {
    search () {
      this.$emit('search', this.searchValue)
    }
  },
  watch: {
    value (val) {
      this.searchValue = val
    }
  }
}
</script>

<style scoped>
.search-input {
  display: flex;
  align-items: center;
}
</style>

在父组件中，你可以使用 `SearchInput` 组件来代替原来的 `el-input` 组件，同时监听 `search` 事件来处理搜索的逻辑。例如：

<template>
  <div class="search-wrapper">
    <SearchInput v-model="searchValue" @search="handleSearch"/>
  </div>
</template>

<script>
import SearchInput from '@/components/SearchInput'

export default {
  name: 'SearchPage',
  components: {
    SearchInput
  },
  data () {
    return {
      searchValue: ''
    }
  },
  methods: {
    handleSearch (value) {
      console.log(`搜索 ${value}`)
      // 处理搜索逻辑
    }
  }
}
</script>

<style>
.search-wrapper {
  margin: 20px;
}
</style>

这样，你就可以在 Vue2 项目中封装一个带有搜索图标和搜索按钮的搜索框组件了。

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>