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

1、vue组件实践之可搜索下拉框功能之前也写过这个小组件,效果图：最近遇到e下加搜索的功能,子组件vclass=vue-deuvclacur-evclaevclasearueenputeeeyup=searevenediviv-fem,eey=indext-item-textulivclvivivexpefaulreturnetemli父组件传来的数据laceholderdepe:St搜索u的默认值ceholdersNeed是否需要搜索框pe:Booleandefaulttextsedepe:String,未找到结果没有搜索到时的文本提示created(点击组件以外的地方，收起his.itemli

2、stcumenEvenstener(clicel.ceeee)metselectToggleemliur.ese;is.$emit(itesee)leerchvaueecurrentTargethis.itemlisteturnee.indexOf(searc所以稍微完善一下。口emeveeeer=pleek=selectToggle(iteitem.neisNeedest.len.value;data.filter(item,indevalue)!=-1;.list-and-searchbackground:#fff;border:1pxsolid#ccc;display:none;&.on

3、display:block;.cur-nameheight:32px;line-height:32px;text-indent:10px;position:relative;color:#777;&:afterposition:absolute;right:9px;top:13px;content:;width:0;height:0;border-right:6pxsolidtransparent;border-top:6pxsolid#7b7b7b;border-left:6pxsolidtransparent;border-bottom:6pxsolidtransparent;&.show

4、&:afterright:9px;top:6px;border-right:6pxsolidtransparent;border-bottom:6pxsolid#7b7b7b;border-left:6pxsolidtransparent;border-top:6pxsolidtransparent;.vue-dropdown.default-themewidth:200px;z-index:10;border-radius:3px;border:1pxsolid#ccc;cursor:pointer;-webkit-user-select:none;user-select:none;&._s

5、elf-showdisplay:block!important;.search-moduleposition:relative;border-bottom:1pxsolid#ccc;.search-textwidth:100%;height:30px;text-indent:10px;/border-radius:0.5em;box-shadow:none;outline:none;border:none;/&:focus/border-color:#2198f2;/.search-iconposition:absolute;top:24%;right:0.5em;color:#aaa;inp

6、ut:-webkit-input-placeholderfont-size:14px;.list-modulemax-height:200px;overflow-y:auto;li&._self-hidedisplay:none;margin-top:0.4em;padding:0.4em;&:hovercursor:pointer;color:#fff;background:#00a0e9;.tip-nodatafont-size:14px;padding:10px0;text-indent:10px;父组件调用importDropdownfrom/components/dropdown.v

7、ueexportdefaultdata()returnitemlist:cur:val:,name:所有产品,data:val:,name:所有产品,val:1,name:梦幻西游,val:2,name:梦幻无双,val:3,name:大话西游,components:Dropdown,methods:dropDownClick(e)console.log(,e.val)默认是不带搜索框，如果需要可以传这个:isNeedSearch=true。ps:下面看下vue组件实践-可搜索下拉框实践加深对vue的理解和运用有效途径，本文是基于vue的可搜索下拉框定制组件实现，在此记录、效果二、

8、组件代码nodatatextexportdefaultdata()returndatalist:,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)/bin和update钩子letvalue=

9、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)letvm=t

10、his,searchvalue=e.currentTarget.value;vm.datalist=vm.itemlist.filter(function(item,index,arr).indexOf(searchvalue)!=-1;);,computed:length:function()returnthis.datalist.length;.vue-dropdown.default-themeposition:absolute;left:15%;display:none;width:70%;margin:0auto;margin-top:1em;paddi

11、ng:1em;z-index:10;box-shadow:0px0px10px#ccc;&._self-showdisplay:block!important;.search-moduleposition:relative;.search-textwidth:100%;height:30px;padding-right:2em;padding-left:0.5em;border-radius:0.5em;box-shadow:none;border:1pxsolid#ccc;&:focusborder-color:#2198f2;.search-iconposition:absolute;top:24%;right:0.5em;color:#aaa;.list-modulemax-height:200px;overflow-y:auto;li&._self-hidedisplay:none;margin-top:0.5em;pa