platformFront/src/components/basicKnow/SearchList.vue

<template>
  <div class="conceptSearch" :style="{'top':top?top:'200px'}" ref="conceptSearch">
    <h4  class="conceptTitle">{{title||'术语（概念ID）搜索'}}</h4>
    <img class="closeSearch" src="../../images/close-icon.png" @click="closeSearch" alt="">
    <p class="searchWrap">
      <img class="search" src="../../images/search.png" alt="搜索">
      <input v-model.trim="conceptText" @input="searchConcept" type="text" ref="conceptInput" class="searchText" :placeholder="placeTxt||'请输入关键词搜索'">
    </p>
    <ul class="conceptList" ref="conceptList">
      <li 
        v-for="item in conceptList" 
        class="conceptItem ellipsis"
        :title="item.conceptName"
        @click="selectConcept(item)"
        :key="item.conceptId">
        {{item.conceptName}}
      </li>
      <li class="noresult" v-if="conceptList.length==0">暂无结果~</li>
    </ul>
  </div>
</template>
<script>
import api from '@api/knowledgeTree.js';
export default {
  props:['conceptList','addLevel','top','title','placeTxt'],
  data(){
    return {
      conceptText: '',
      list: [], //概念列表
      timer:null
    }
  },
  watch:{
    addLevel:{
      handler(newName, oldName) {
        this.conceptText = ''
        this.list = []
      },
      deep: true
    }
  },
  destroyed(){
    this.$emit('searchConcept','')
  },
  methods:{
    closeSearch() {
      this.$emit('closeSearch')
    },
    selectConcept(item) {
      this.$emit('selectConcept',{item,txt:this.conceptText})
      // this.$emit('closeSearch')
    },
    searchConcept() {
      if(this.timer) {
        clearTimeout(this.timer)
      }
      this.timer = setTimeout(()=>{
        this.$emit('searchConcept',this.conceptText)
      },300)
    },
  }
}
</script>
<style lang="less" scoped>
.conceptSearch {
  position: fixed;
  right: 20px;
  top: 200px;
  bottom: 10px;
  width: 300px;
  background: #fff;
  border: 1px solid #C9C9C9;
  text-align: center;
  z-index: 2;
  padding: 30px;
  box-sizing: border-box;
  .conceptTitle {
    width: 100%;
    text-align: center;
    padding: 20px 0;
  }
  .searchText {
    padding: 0 35px 0 15px;
    width: 100%;
    height: 34px;
    border: 1px solid #C9C9C9;
    box-sizing: border-box;
  }
  .conceptList {
    min-height: 200px;
    max-height:300px;
    margin: -2px auto 0;
    border: 1px solid #E1DFDF;
    overflow: hidden;
    overflow-y: auto;
  }
  .conceptItem {
    height: 34px;
    line-height: 34px;
    text-align: left;
    padding: 0 15px;
    cursor: pointer;
  }
  .conceptItem:hover {
    background: #f5f7fa;
  }
  .closeSearch {
    position: absolute;
    width: 30px;
    right: 0;
    top: 0;
  }
  .searchWrap {
    position: relative;
    .search {
      position: absolute;
      right: 7px;
      top:8px;
    }
  }
}
.noresult {
  padding: 20px 0;
  color: #ccc;
}
</style>