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 项目中封装一个带有搜索图标和搜索按钮的搜索框组件了。