yangshi_cloudExbition/src/pages/scene/search/index.vue

<template>
  <div class="vsearch" v-clickoutside="handleOutside">
    <div class="vinput" @click.stop @keydown.stop @touchstart.stop>
      <input @click="isShow=true" @focus="isShow=true" type="text" placeholder="请输入关键字…" v-model="key">
      <img :src="require(`@/assets/images/project/icon/search.png`)" alt="">
    </div>
    <div class="cpylist" :class="{listactive:isShow}">
      <p class="btmdashline">参展项目及企业</p>
        <ul v-if="region.length>0">
          <li class="textActive" v-for="(item,i) in region" :key="i">
            <p @click.stop="handleItem(item)">{{item.name}}</p>
          </li>
        </ul>
        <ul v-else>
          <li>未搜索到该项目</li>
        </ul>
      </div>
  </div>
</template>

<script>
import {Booth} from '@/data/raw'

let fixBooth = Booth.filter(item=>(item.mapId.indexOf('xt')<=-1))
let arr = []

export default {
  props:['currentPanoid'],
  data(){
    this.u_extend(arr,fixBooth)
    return {
      key:'',
      region:arr,
      isShow: false
    }
  },
  watch:{
    currentPanoid(){
      this.isShow=false
    },
    key(newVal){
     let tmpregion = []
      this.u_extend(tmpregion,fixBooth)
      if (!newVal) {
        this.region = tmpregion
      }
      else{
        this.region = tmpregion.filter(item=>{
          if (item.name.indexOf(newVal)>-1) {
            return item
          }
        })
      }
    }
  },
  methods:{
    handleOutside(){
      this.isShow = false
    },
    handleItem(item){
      this.$bus.$emit('ifrMessage',{
        events:'flyToPano',
        data:item
      })
      this.handleOutside()
    }
  },
  mounted(){
  }
}
</script>

<style lang="less" scoped>

::-webkit-scrollbar {
  width: 2px;
  height: 2px;
}

::-webkit-scrollbar-thumb {
  height: 2px;
  background-color: rgba(255, 255, 255, 0.4);
  outline: 2px solid rgba(255, 255, 255, 0.4);
}

::-webkit-scrollbar-thumb:hover {
  height: 2px;
  background-color: rgba(255, 255, 255, 0.4);
}

.vsearch{
  width: 300px;
  color: #fff;
  .vinput{
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 20px;
    padding: 0 20px;
    width: 100%;
    >input{
      line-height: 35px;
      height: 35;
      color: #fff;
      width: 80%;
    }
    >img{
      width: 20px;
      cursor: pointer;
    }
  }
  .cpylist{
    margin-top: 8px;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 20px;
    padding: 0;
    max-height: 0;
    overflow: hidden;
    transition: all ease .3s;
    >p{
      font-size: 18px;
      font-weight: bold;
      padding: 0 10px 18px;
    }
    >ul{
      max-height: calc(100vh - 160px);
      overflow-y: auto;
      padding:0 15px 0;
       >li{
         margin: 18px 0;
         &:last-of-type{
           margin-bottom: 0;
         }
         >ul{
          //  margin-left: 20px;
           >li{
            margin: 18px 0;
           }
         }
       }
    }
  }
  .listactive{
    padding: 25px 18px 18px;
    max-height: 100vh;
  }
}
</style>