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
},
'icon-class':{
type:String,
default:''
},
'has-status':{
type:Boolean,
default:false
},
'status-icon-type':{
type:String,
default:'text'//text or icon
},
'max-h':{
type:Number,
default:$(window).height()-400
}
},
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,event){
this.$emit('item-click',data,event);
},
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;
});
},
statusIconClass:function(status){
let statusClass = '';
return statusClass;
}
},
mounted:function(){
}
}
</script>
<style lang="scss" scoped>
.text-overflow__style {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.vue-dropdown-ext {
.search-module {
position: relative;
.search-text {
width: 100%;
height: 30px;
padding-right: 2em;
padding-left:0.5em;
box-shadow: none;
border: 1px solid #ccc;
background: #fff;
&:focus {
border-color: #2198f2;
}
}
.search-icon {
position: absolute;
top: 24%;
right: 0.5em;
color: #aaa;
}
}
.list-module {
overflow: auto;
li {
position: relative;
margin-top: 0.5em;
padding: 0.5em;
border: 1px solid #ccc;
white-space: nowrap;
&>span {
display: inline-block;
vertical-align: middle;
}
}
}
.tip__nodata {
font-size: 12px;
margin-top: 1em;
}
&.default-theme {
.list-module li {
&:hover {
cursor: pointer;
border-color: #00a0e9;
}
&.active {
border-color: #00a0e9;
color: #00a0e9;
}
}
}
}
</style>

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

您可能感兴趣的文章:

• vue组件 $children,$refs，$parent的使用详解
• 解决vue组件中使用v-for出现告警问题及v for指令介绍
• Vue组件tree实现树形菜单
• Vue组件之全局组件与局部组件的使用详解
• 详解利用jsx写vue组件的方法示例
• 在vue组件中使用axios的方法
• vue组件如何被其他项目引用
• vue组件中点击按钮后修改输入框的状态实例代码
• vue组件实现文字居中对齐的方法
• Vue组件选项props实例详解
• vue组件中使用iframe元素的示例代码
• 使用Vue组件实现一个简单弹窗效果
• 详解vue组件通信的三种方式
• 在Vue组件上动态添加和删除属性方法
• 通过npm引用的vue组件使用详解
• Vue组件通信之Bus的具体使用
• Vue组件BootPage实现简单的分页功能
• 从零开始封装自己的自定义Vue组件