Vue搜索组件，显示热门、近期搜索（结合element ui）

以下是一个简单的Vue组件示例，使用Element UI来展示热门搜索词和最近搜索的列表。

<template>
  <div class="search-component">
    <el-input
      v-model="searchQuery"
      placeholder="请输入搜索内容"
      @keyup.enter="handleSearch"
    ></el-input>
    <el-button @click="handleSearch">搜索</el-button>
    <div class="search-history" v-if="searchHistory.length">
      <h3>最近搜索</h3>
      <el-button
        v-for="(item, index) in searchHistory"
        :key="index"
        @click="handleSearch(item)"
      >
        {{ item }}
      </el-button>
    </div>
    <div class="hot-search" v-if="hotSearchWords.length">
      <h3>热门搜索</h3>
      <el-button
        v-for="(item, index) in hotSearchWords"
        :key="index"
        @click="handleSearch(item)"
      >
        {{ item }}
      </el-button>
    </div>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      searchQuery: '',
      searchHistory: ['Vue', 'React', 'Angular'], // 假设的搜索历史
      hotSearchWords: ['JavaScript', 'CSS', 'HTML'] // 假设的热门搜索词
    };
  },
  methods: {
    handleSearch(query) {
      const searchQuery = query || this.searchQuery;
      if (searchQuery) {
        // 将搜索词推入历史记录，可以存储到localStorage或服务器
        this.searchHistory = [searchQuery, ...this.searchHistory];
        // 执行实际的搜索操作
        console.log('Searching for:', searchQuery);
      }
    }
  }
};
</script>
 
<style scoped>
.search-component {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}
.search-history, .hot-search {
  margin-top: 10px;
}
</style>

这个组件包含了一个搜索输入框和一个搜索按钮。在用户输入后按下回车键或点击搜索按钮时，会触发handleSearch方法。该方法将搜索词添加到搜索历史列表中，并在控制台输出搜索信息。热门搜索词列表和最近搜索列表使用Element UI的<el-button>组件来展示，并且支持点击事件以便重新触发搜索。