搜索历史、建议、结果的显示逻辑

<template>
  <div id="searchVue">
    <form action="/">
      <van-search
        v-model="keywords"
        show-action
        background="#4694fa"
        placeholder="请输入搜索关键词"
        @search="onSearch"
        @cancel="$router.go(-1)"
        @focus="suggestShow = true"
      />
      <!-- 搜素历史 关键词为空 -->
      <searchHistory v-if="keywords === ''"></searchHistory>
      <!-- 搜素建议 关键词不为空而且触发了聚焦事件显示建议组件 -->
      <searchSuggest v-else-if="suggestShow"></searchSuggest>
      <!-- 搜索结果 -->
      <searchResult v-else></searchResult>
    </form>
  </div>
</template>

<script>
import searchHistory from "@/views/search/components/search-history";
import searchSuggest from "@/views/search/components/search-suggest";
import searchResult from "@/views/search/components/search-result";
export default {
  // 搜索逻辑的判断展示思路
  /**
   * 1. 如果 keywords 是空，就显示搜索历史
   * 2. 如果 input 聚焦，并且搜索关键词 keywords 不为空，就显示搜索建议
   * 3. 点击搜索次或者在input框聚焦状态下按下 enter 触发 input 的时候展示搜索结果
   */
  components: {
    searchHistory,
    searchSuggest,
    searchResult,
  },
  data() {
    return {
      keywords: "",
      suggestShow: false,
    };
  },
  methods: {
    onSearch() {
      // enter 触发搜索 要展示搜索结果
      this.suggestShow = false;
    },
  },
};
</script>

<style lang="less">
#searchVue {
  .van-search__action {
    color: white;
    &:active {
      background-color: #5094f3;
    }
  }
}
</style>