基于vue实现可搜索下拉框定制组件

实践加深对vue的理解和运用有效途径，本文是基于vue的可搜索下拉框定制组件实现，在此记录.

一、效果

二、组件代码

dropdown.vue

<template>
 <div class="vue-dropdown default-theme" v-show-extend="show">
  <div class="search-module clearfix" v-show="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">
   <li v-for ="(item,index) in datalist" @click="appClick(item)"
   :key="index">
    <span class="list-item-text">{{item.name}}</span>
   </li>
  </ul>
  <div class="tip__nodata" v-show="!datalist.length">{{nodatatext}}</div>
 </div>
</template>

<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
  },
  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){
    this.$emit('item-click',data);
   },
   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;
    });
   }
  },
  mounted:function(){

  }
 }
</script>

<style lang="scss" scoped>
 .vue-dropdown.default-theme {
  position: absolute;
  left:15%;
  display: none;
  width: 70%;
  margin: 0 auto;
  margin-top: 1em;
  padding: 1em;
  z-index:10;
  box-shadow: 0px 0px 10px #ccc;
  &._self-show {
   display: block!important;
  }

  .search-module {
   position: relative;
   .search-text {
    width: 100%;
    height: 30px;
    padding-right: 2em;
    padding-left:0.5em;
    border-radius: 0.5em;
    box-shadow: none;
    border: 1px solid #ccc;

    &:focus {
     border-color: #2198f2;
    }
   }

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

  }

  .list-module {
   max-height: 200px;
   overflow-y: auto;
   li {
    &._self-hide {
     display: none;
    }
    margin-top: 0.5em;
    padding: 0.5em;
    &:hover {
     cursor:pointer;
     color: #fff;
     background: #00a0e9;

    }
   }
  }
 }
 .tip__nodata {
  font-size: 12px;
  margin-top: 1em;
 }
</style>

三、组件使用

<dropdown :itemlist="itemlist" :placeholder="placeholder" :nodatatext="nodatatext"></dropdown>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。