<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