vue下拉菜单组件（含搜索）的实现代码

之前也写过这个小组件，最近遇到select下加搜索的功能，所以稍微完善一下。

效果图：

子组件 dropdown.vue

<template>
<div class="vue-dropdown default-theme">
 <div class="cur-name" @click="isShow =! isShow">{{itemlist.cur.name}}</div>
 <div class="list-and-search" :class="isShow?'on':''">
 <div class="search-module clearfix" v-show="isNeedSearch">
   <input class="search-text"
   @keyup='search($event)' :placeholder="placeholder" />
  </div>
  <ul class="list-module">
   <li v-for ="(item,index) in datalist" @click="selectToggle(item)"
   :key="index">
    <span class="list-item-text">{{item.name}}</span>
   </li>
  </ul>
  <div class="tip-nodata" v-show="isNeedSearch && datalist.length == 0">{{nodatatext}}</div>
 </div>
</div>
</template>

<script>
export default {
 data(){
  return {
   datalist:[],
   isShow:false
  }
 },
 props:{
  'itemlist':Object,//父组件传来的数据
  'placeholder':{
   type:String,
   default: '搜索' //input placeholder的默认值
  },
  'isNeedSearch':{ //是否需要搜索框
   type:Boolean,
   default: false
  },
  'nodatatext':{ //是否需要显示搜索
   type:String,
   default: '未找到结果' //没有搜索到时的文本提示
  }
 },
 created(){
  this.datalist = this.itemlist.data;
  //点击组件以外的地方，收起
  document.addEventListener('click', (e) => {
   if (!this.$el.contains(e.target)){
    this.isShow = false;
   }
  }, false)
 },
 methods:{
  selectToggle(data){
   this.itemlist.cur.name = data.name;
   this.isShow = false;
   this.$emit('item-click',data);
  },
  search(e){
   let searchvalue = e.currentTarget.value;
   this.datalist = this.itemlist.data.filter((item,index,arr)=>{
    return item.name.indexOf(searchvalue) != -1;
   });
  }
 }
}
</script>

<style lang="less" scoped>
.list-and-search{
background: #fff;
border: 1px solid #ccc;
display: none;
 &.on{
  display: block;
 }
}
.cur-name{
height: 32px;
line-height: 32px;
text-indent: 10px;
position: relative;
color: #777;
&:after{
position: absolute;
 right: 9px;
 top: 13px;
 content: " ";
 width: 0;
 height: 0;
 border-right: 6px solid transparent;
 border-top: 6px solid #7b7b7b;
 border-left: 6px solid transparent;
 border-bottom: 6px solid transparent;
}
&.show{
&:after{
right: 9px;
 top: 6px;
 border-right: 6px solid transparent;
 border-bottom: 6px solid #7b7b7b;
 border-left: 6px solid transparent;
 border-top: 6px solid transparent;
}
}
}
.vue-dropdown.default-theme {
 width: 200px;
 z-index:10;
 border-radius:3px;
 border: 1px solid #ccc;
 cursor: pointer;
 -webkit-user-select:none;
user-select:none;
 &._self-show {
  display: block!important;
 }
 .search-module {
  position: relative;
  border-bottom: 1px solid #ccc;
  .search-text {
   width: 100％;
   height: 30px;
   text-indent: 10px;
   // border-radius: 0.5em;
   box-shadow: none;
   outline: none;
   border: none;
   // &:focus {
   //  border-color: #2198f2;
   // }
  }
  .search-icon {
   position: absolute;
   top: 24％;
   right: 0.5em;
   color: #aaa;
  }
 }
 input::-webkit-input-placeholder{
  font-size: 14px;
 }
 .list-module {
  max-height: 200px;
  overflow-y: auto;
  li {
   &._self-hide {
    display: none;
   }
   margin-top: 0.4em;
   padding: 0.4em;
   &:hover {
    cursor:pointer;
    color: #fff;
    background: #00a0e9;
   }
  }
 }
}
.tip-nodata {
 font-size: 14px;
 padding: 10px 0;
 text-indent: 10px;
}
</style>

父组件调用

<dropdown :item-click="dropDownClick" :isNeedSearch="true" :itemlist="itemlist"></dropdown>
import Dropdown from '@/components/dropdown.vue'
export default {
data() {
return {
 itemlist: {
 cur: {
  val: "",
  name: "所有产品"
 },
 data: [{
  val: "",
  name: "所有产品"
 }, {
  val: 1,
  name: "梦幻西游"
 }, {
  val: 2,
  name: "梦幻无双"
 }, {
  val: 3,
  name: "大话西游"
 }]
 },
}
},
components: {
Dropdown,
},
methods :{
dropDownClick(e) {
 console.log(e.name, e.val)
}
}
}

默认是不带搜索框，如果需要可以传这个 :isNeedSearch="true" 。

来源：https://xiaojiecong.github.io/2018/11/24/vue下拉菜单组件（含搜索）/