vue组件实践之可搜索下拉框功能

<template> <div class="vue-dropdown default-theme"> <div class="cur-name" :class="isShow ? 'show':''" @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) } }}

<template> <div class="vue-dropdown default-theme" 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">   <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="!length">{{nodatatext}}</div> </div></template><script> export default {  data(){   return {    datalist:[]   }  },  props:{   'show':{//用于外部控制组件的显示/隐藏    type:Boolean,    default:true   },   'itemlist':Array,   'placeholder':String,   'nodatatext':String  },  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){    this.$emit('item-click',data);   },   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;    });   }  },  computed:{   length:function(){    return this.datalist.length;   }  } }</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>