vue组件实现可搜索下拉框扩展

本文实例为大家分享了vue组件实现可搜索下拉框的具体代码，供大家参考，具体内容如下

一、效果

二、代码

dropdown-ext.vue

<template>
 <div class="vue-dropdown-ext" :class="themestyle" v-show-extend="show">
   <div class="search-module clearfix" v-show="itemlist.length">
     <input class="search-text" @keyup='search($event)'
     :placeholder="placeholder" />
     <span class="glyphicon glyphicon-search search-icon"></span>
   </div>
   <ul class="list-module" v-show="length" :style="{maxHeight:maxH+'px'}">
     <li v-for ="(item,index) in datalist" @click="appClick(item,$event)"
     :key="index" :title="item.name">
       <span v-if="addIcon" :class="iconClass"></span>
       :style="itemTextStyle">{{item.name}}</span>
       <span v-if="statusIconType == 'text' && hasStatus"
       :class="item.statusClass">{{item.statusText}}</span>
        :class="item.statusClass"></span>
     </li>
   </ul>
   <div class="tip__nodata" v-show="!length&&itemlist.length">
   {{nodatatext}}
   </div>
 </div>
</template>

<script>
 export default {
   data(){
     return {
       datalist:[]
     }
   },
   props:{
     'show':{//用于外部控制组件的显示/隐藏
       type:Boolean,
       default:true
     },
     'itemlist':Array,
     'placeholder':String,
     'nodatatext':String,
     'themestyle':{
       type:String,
       default:'default-theme'
     },
     'item-text-style':{
       type:Object,
       default:function(){
         return {
           width:'80％'
         }
       }
     },
     'add-icon':{
       type:Boolean,
       default:true
     },
     'icon-class':{
       type:String,
       default:''
     },
     'has-status':{
       type:Boolean,
       default:false
     },
     'status-icon-type':{
       type:String,
       default:'text'//text or icon
     },
     'max-h':{
       type:Number,
       default:$(window).height()-400
     }
   },
   watch:{
     itemlist:function(val){
       this.datalist = val.concat();
     }
   },
   directives:{
     'show-extend':function(el,binding,vnode){//bind和 update钩子
       let value = binding.value,searchInput = null;
       if(value){
         el.style.display='block';
       }else{//隐藏后，恢复初始状态
         el.style.display='none';
         searchInput = el.querySelector(".search-text");
         searchInput.value = '';
         //还原渲染数据
         vnode.context.datalist = vnode.context.itemlist;
       }
     }
   },
   methods:{
     appClick:function(data,event){
       this.$emit('item-click',data,event);
     },
     search:function(e){
       let vm = this,searchvalue = e.currentTarget.value;
       vm.datalist = vm.itemlist.filter(
       function(item,index,arr){
         return item.name.indexOf(searchvalue) != -1;
       });
     },
     statusIconClass:function(status){
       let statusClass = '';
       return statusClass;
     }
   },
   computed:{
     length:function(){
       return this.datalist.length;
     }
   }
 }
</script>

<style lang="scss" scoped>
 .text-overflow__style {
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
 }
 .vue-dropdown-ext {

.search-module { position: relative;
     .search-text { width: 100％;
       height: 30px;
       padding-right: 2em;
       padding-left:0.5em;
       box-shadow: none;
       border: 1px solid #ccc;
       background: #fff;
       &:focus { border-color: #2198f2;
       }
     }

.search-icon {
       position: absolute;
       top: 24％;
       right: 0.5em;
       color: #aaa;
     }

}

.list-module {
     overflow: auto;
     li { position: relative;
       margin-top: 0.5em;
       padding: 0.5em;
       border: 1px solid #ccc;
       white-space: nowrap;

&>span { display: inline-block;
         vertical-align: middle;
       }

}
   }

.tip__nodata {
     font-size: 12px;
     margin-top: 1em;
   }

&.default-theme {
     .list-module li { &:hover { cursor: pointer;
         border-color: #00a0e9;
       }

&.active {
         border-color: #00a0e9;
         color: #00a0e9;
       }
     }

}
 }
</style>

来源：https://blog.csdn.net/wanglei1991gao/article/details/80579666