php搜索下拉框,vue做出可搜索下拉框

这次给大家带来vue做出可搜索下拉框，vue做出可搜索下拉框的注意事项有哪些，下面就是实战案例，一起来看一下。

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

一、效果

二、组件代码

dropdown.vue

@keyup='search($event)' :placeholder="placeholder" />

• :key="index">

  {{item.name}}

{{nodatatext}}

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(){

}

}

.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;

}

三、组件使用

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

推荐阅读：