让el-input输入框弹出历史记录框

您可以使用以下步骤使el-input输入框弹出历史记录框：

1. 创建一个历史记录组件，该组件可以包含以前输入的值。您可以使用v-for指令从历史记录数组中循环遍历值，并将每个值显示为下拉选项。

2. 在el-input组件中设置一个v-model绑定，它将存储当前输入框中的值。

3. 为el-input组件添加一个@focus事件监听器，该事件将触发下拉框的显示。在事件处理程序中，您可以设置下拉框的位置和显示方式。

4. 在下拉框中，您可以为每个选项添加一个@click事件监听器，当用户选择一个选项时，它将被设置为输入框的值，并将下拉框隐藏。

下面是一个简单的示例代码，可以帮助您快速入门：

<template>
  <div>
    <el-input v-model="inputValue" @focus="showHistory">
      <el-dropdown :show="showDropdown" style="width:100%">
        <el-dropdown-menu>
          <el-dropdown-item v-for="(item,index) in history" :key="index" @click="selectItem(item)">{{item}}</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </el-input>
  </div>
</template>

<script>
export default {
  data() {
    return {
      inputValue: '',
      showDropdown: false,
      history: ['value1', 'value2', 'value3']
    };
  },
  methods: {
    showHistory() {
      this.showDropdown = true;
    },
    selectItem(item) {
      this.inputValue = item;
      this.showDropdown = false;
    }
  }
};
</script>

在这个例子中，我们使用了Element UI库中的el-input和el-dropdown组件。在data函数中，我们初始化了输入框的值，下拉框的显示状态和历史记录数组。在showHistory方法中，我们将下拉框的show属性设置为true，以显示下拉框。在selectItem方法中，我们将选择的项设置为输入框的值，并将下拉框隐藏。