饿了么带按钮的input

饿了么 UI 库中提供了一个带按钮的输入框组件 `el-input`，可以使用该组件来实现带按钮的输入框。

首先，你需要在项目中引入饿了么 UI 库。可以在 `main.js` 文件中添加以下代码：

import Vue from 'vue'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'

Vue.use(ElementUI)

然后，在你的组件模板中，可以使用 `el-input` 组件来实现带按钮的输入框。例如：

<template>
  <div class="search-input">
    <el-input v-model="searchValue" placeholder="请输入搜索内容" prefix-icon="el-icon-search" clearable>
      <el-button slot="append" icon="el-icon-search" @click="search">搜索</el-button>
    </el-input>
  </div>
</template>

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

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

其中，`el-input` 组件的 `prefix-icon` 属性表示输入框左侧的图标，`clearable` 属性表示输入框右侧的清空按钮，`slot="append"` 表示按钮插入到输入框的右侧，`icon` 属性表示按钮的图标，`@click` 事件表示按钮的点击事件。

这样，你就可以在项目中使用饿了么 UI 库提供的 `el-input` 组件来实现带按钮的输入框了。