Vue2+ElementUI存储搜索记录至缓存，搜索框el-input+弹出框el-popover，对历史记录可增删查，聚焦显示历史记录框，回车搜索事件

在Vue2和ElementUI中，你可以使用el-input组件来创建搜索框，并使用el-popover组件来显示搜索记录的弹出框。以下是一个简单的例子，展示了如何实现这个功能：

<template>
  <div>
    <el-input
      v-model="searchText"
      placeholder="请输入内容"
      @input="handleInput"
    >
      <template #suffix>
        <el-popover
          ref="popover"
          placement="bottom"
          width="200"
          trigger="manual"
          v-model="showPopover"
          @show="handlePopoverShow"
        >
          <el-button
            v-for="(item, index) in searchHistory"
            :key="index"
            @click="handleHistoryClick(item)"
          >
            {{ item }}
          </el-button>
          <template #reference>
            <i
              v-if="searchHistory.length > 0"
              class="el-icon-arrow-down el-input__icon"
              @click="showPopover = true"
            ></i>
          </template>
        </el-popover>
      </template>
    </el-input>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      searchText: '',
      searchHistory: JSON.parse(localStorage.getItem('searchHistory')) || [],
      showPopover: false,
    };
  },
  watch: {
    searchHistory: {
      deep: true,
      handler(newVal) {
        localStorage.setItem('searchHistory', JSON.stringify(newVal));
      },
    },
  },
  methods: {
    handleInput() {
      if (this.searchText.trim() && !this.searchHistory.includes(this.searchText)) {
        this.searchHistory.push(this.searchText);
      }
    },
    handlePopoverShow() {
      this.$refs.popover.popperElm.focus();
    },
    handleHistoryClick(item) {
      this.searchText = item;
      this.showPopover = false;
    },
  },
};
</script>

在这个例子中，我们使用了localStorage来存储搜索历史记录。当用户输入时，通过handleInput方法更新搜索记录。如果搜索框中的文本不为空，且不在历史记录中，则将其加入到历史记录中。el-popover组件用于显示搜索历史，并且当用户点击搜索图标时，弹出搜索历史列表供用户选择。用户点击任意历史记录时，将该记录填充到搜索框并关闭弹出框。

请确保你已经在项目中安装并配置了ElementUI，并且在你的主文件（main.js或app.js）中引入了ElementUI：

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