vue组件实现可搜索下拉框扩展组件实现可搜索下拉框扩展
主要为大家详细介绍了vue组件实现可搜索下拉框的方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一
下
本文实例为大家分享了vue组件实现可搜索下拉框的具体代码,供大家参考,具体内容如下
一、效果一、效果
二、代码二、代码
dropdown-ext.vue
<template>
<div class="vue-dropdown-ext" :class="themestyle" 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" :style="{maxHeight:maxH+'px'}">
<li v-for ="(item,index) in datalist" @click="appClick(item,$event)"
:key="index" :title="item.name">
<span v-if="addIcon" :class="iconClass"></span>
:style="itemTextStyle">{{item.name}}</span>
<span v-if="statusIconType == 'text' && hasStatus"
:class="item.statusClass">{{item.statusText}}</span>
:class="item.statusClass"></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,
'themestyle':{
type:String,
default:'default-theme'
},
'item-text-style':{
type:Object,
default:function(){
return {
width:'80%'
}
}
},
'add-icon':{
type:Boolean,
default:true
},
评论0