input 失去焦点隐藏div

  <div class="search" ref="slicerBtn">
      <svg-icon class="search_icon" class-name="search-icon" icon-class="search"/>
      <el-input placeholder="Search" v-model="search"></el-input><!--@keyup.enter.native="Getsearchs" -->
      <div class="search_Main" v-show="show" v-loading="loding" ref="slicer">
        <div v-for="(item,index) in options" :key="index">
          <div class="search-title" :style="'color:'+color[index].c">{{item.type}}</div>
           <div v-if="item.list.length == 0" class="grey search-text"> &nbsp;&nbsp;&nbsp;no results</div>
          <div class="search-item" v-for="(ele,i) in item.list" :key="i" v-if="i<5 || color[index].xh" @click="GetSearchItem(ele)">
            <div class="search-size" :style="'background:'+color[index].c">{{color[index].s}}</div>{{ele.name}}
          </div>
          <div class="showmore" v-if="item.list.length>5 && !color[index].xh" @click="Showmore(index)">Show more</div>
        </div>
      </div>
  </div>


  created(){
    document.addEventListener('click',(e)=>{
        if(this.show)
        if(!this.$refs.slicer.contains(e.target) && !this.$refs.slicerBtn.contains(e.target)){
            this.show = false;
            this.search = '';
        }
    })
  },
  data(){
     search: '',
	loding: false,
	options: [{type: "Report", list:[]},{type: "Application", list:[]},{type: "Tags", list:[]},{type: "Department", list:[]}],
	color:[{s:'R',c:'#3A87AD',xh:false},{s:'A',c:'#A48800',xh:false},{s:'T',c:'#FFA500',xh:false}{s:'D',c:'#9E072E',xh:false}],
	},

  watch: {
    search: {
      immediate: true,
      deep: true,
      handler(newValue, oldValue) {
        if(newValue.length>=2){
          this.Getsearchs();
        };
        if(!newValue.length){
          this.show = false;
          this.color = [{s:'R',c:'#3A87AD',xh:false},{s:'A',c:'#A48800',xh:false},{s:'T',c:'#FFA500',xh:false},{s:'D',c:'#9E072E',xh:false}];
       
        }
      }
    }
  },

  methods: {
    GetSearchItem(ele){
    // 隐藏
        this.$nextTick(()=> {
          this.search = '';
          this.show = false;
        })
    },
 Showmore(index){
      this.color[index].xh = !this.color[index].xh
    },
  },
    Getsearchs() {
      this.show = true;
      this.loding = true;
      handSearch(this.search,this.num).then(res => {
        let arr = [{type: "Report", list:[]},{type: "Application", list:[]},{type: "Tags", list:[]},{type: "Department", list:[]}]
          if(res.data == null) {
            this.options = [{type: "Report", list:[{name: 111,type: 'app}]},{type: "Application", list:[]},{type: "Tags", list:[]},{type: "Department", list:[]}];
          } else {
            this.options = res.data;
          }
          this.loding = false;
      }).catch(error => {

      });
    },


<style lang="scss" scoped>
.search_Main{
  z-index: 100;
  border-radius:0 0 5px 5px;
  position: absolute;
  background: #fff;
  border: 1px solid #eee;
  left: 0;
  top: 35px;
  width: 100%;
  max-height:340px;
  overflow-y: auto;
}
.search-title{
  padding:5px 10px;
  font-size: 12px;
  font-weight: bold;
}
.search-item{
  font-size: 12px;
  padding:5px 10px;
  display: flex;
  align-items: center;
}
.search-item:hover{
  background: #ededed;
  cursor: pointer;
}

.search-text {
  font-size: 12px;
}
.search-item .search-size{
  height: 20px;
  width:20px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  margin-right: 10px;
  font-size: 12px;
}
.showmore{
  font-style: oblique;
  font-size: 10px;
  color: #818080;
  padding: 10px 10px;
  cursor: pointer;
}
.search {
  position: relative;
 >>> .el-input__inner {
    width:  270px;
    padding-left: 45px;
    border-radius: 5px;
  }


}

  .search_icon {
    font-size: 18px;
    position: absolute;
    top: 10px;
    left: 10px;
    cursor: pointer;
    z-index: 1;
  }


.header-search {
  font-size: 0 !important;

  .search-icon {
    cursor: pointer;
    font-size: 18px;
    vertical-align: middle;
  }

  .header-search-select {
    font-size: 18px;
    transition: width 0.2s;
    width: 0;
    overflow: hidden;
    background: transparent;
    border-radius: 0;
    display: inline-block;
    vertical-align: middle;

    /deep/ .el-input__inner {
      // border-radius: 0;
      border-radius: 10%, 10% ,10%, 10%;
      border: 0;
      padding-left: 15px;
      padding-right: 0;
      box-shadow: none !important;
      border-bottom: 1px solid #d9d9d9;
      vertical-align: middle;
    }
  }

  &.show {
    .header-search-select {
      width: 210px;
      margin-right: 10px;
    }
  }
}
</style>