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

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

一、效果

二、代码

dropdown-ext.vue

<script>
 export default {
 data(){
  return {
  _datalist:this.itemlist.concat(),
  datalist:this.itemlist.concat(),
  length:this.itemlist.length
  }
 },
 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
  }
 },
 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.$data._datalist.filter(
  function(item,index,arr){
   return item.name.indexOf(searchvalue) != -1;
  });
  },
  statusIconClass:function(status){
  let statusClass = '';
  return statusClass;
  }
 },
 mounted:function(){

 }
 }
</script>