分析: 用两个变量来控制两个展示列表
<!-- 搜索框效果:
1. 聚焦显示热门城市
2. 失去焦点热门城市隐藏
3. 输入内容 显示搜索列表 热门城市隐藏
4. 输入内容 又删除--输入的值为空 搜索列表隐藏 热门城市显示
5. 输入的值存在 失去焦点 隐藏搜索列表
6. 输入的值存在 聚焦 显示搜索列表
-->
代码:
<!-- 搜索框内容 -->
<div class="search">
<div :class="{ bg: isShow }">
<el-row>
<el-col :span="8" :offset="8">
<!-- 搜索框效果:
1. 聚焦显示热门城市
2. 失去焦点热门城市隐藏
3. 输入内容 显示搜索列表 热门城市隐藏
4. 输入内容 又删除--输入的值为空 搜索列表隐藏 热门城市显示
5. 输入的值存在 失去焦点 隐藏搜索列表
6. 输入的值存在 聚焦 显示搜索列表
-->
<div class="input-bg">
<el-input
v-model="input"
@focus="getInput"
@blur="laveInput"
placeholder="请输入内容"
></el-input>
<el-button>搜索</el-button>
</div>
<!-- 显示内容区域--热门城市 聚焦会显示 输入的内容为空显示 -->
<div class="list" v-show="isShow">
<p class="info">
温馨提示:可以直接输入城市的中文、英文来匹配检索
</p>
<div class="title">热门城市</div>
<div class="hot-citys">
<a href="##" v-for="item in hotcity" :key="item.id">{{
item.name
}}</a>
</div>
</div>
<!-- 显示搜索的列表内容展示----- -->
<ul class="search-list" v-show="isShowList">
<li v-for="item in searchList" :key="item.id">
{{ item.name }}
<span class="subname">{{ item.en_name }}</span>
<!-- {{item.province.name}} -->
<!-- {{item.province.name}} {{item.country.name}} -->
<!--{{item.city.name}} -->
</li>
</ul>
</el-col>
</el-row>
</div>
</div>
export default {
name: 'HomeView',
data () {
return {
input: '',
isShow: false, //是否显示热门城市
isShowList: true, //是否显示搜索框
hotcity: [], //热门城市名称
searchList: [], //搜索列表容器
}
},
watch: {
//监听input
input (val, old) {
// console.log('监听input ----',val,old);
if (!val) {
this.isShow = true
this.isShowList = false
return ''
}
//输入值:热门城市--隐藏 搜索列表展示
this.isShow = false
this.isShowList = true
//网络请求--------------------
this.$api
.getSearch({
keyword: val
})
.then(res => {
console.log('搜索列表---网络请求----', res.data)
this.searchList = res.data.data.list
})
}
},
methods: {
//获取焦点显示---下拉搜索框
getInput () {
if (this.input) {
this.isShowList = true
return
}
this.isShow = true
},
//失去焦点
laveInput () {
this.isShow = false
this.isShowList = false
},
//获取当前热门城市---------------------------------------
async getHotCity () {
let res = await this.$api.getHotCity()
console.log('获取当前热门城市-------', res.data.result.hotcity)
this.hotcity = res.data.result.hotcity
},
created () {
//1. 获取当前的热门城市-------------------
this.getHotCity()
}
}
</script>
<style lang="less" scoped>
.bg {
background: rgba(255, 255, 255, 0.6);
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
padding-top: 300px;
}
</style>