搜索框vue

 

 

分析： 用两个变量来控制两个展示列表

   <!-- 搜索框效果：
                    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>