首页 > 其他分享 >搜索历史、建议、结果的显示逻辑

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

时间:2022-10-13 12:01:39浏览次数:53  
标签:建议 search views 逻辑 搜索 components keywords import

<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>

 

标签:建议,search,views,逻辑,搜索,components,keywords,import
From: https://www.cnblogs.com/zhulongxu/p/16787714.html

相关文章