效果展示:
组件代码:
<template>
<div class="vue-dropdown">
<div class="cur-name" @click="isShow =! isShow">{{current}}</div>
<div class="list-and-search" :class="isShow?'on':''">
<div class="search-module clearfix" v-show="isNeedSearch">
<input class="search-text" @input.sync='search' :placeholder="placeholder" />
</div>
<ul class="list-module">
<li v-for ="(item,index) in datalist" @click="clickItem(item)" :key="index">
<span class="list-item-text">{{item}}</span>
</li>
</ul>
<div class="tip-nodata" v-show="searchValue.length && !datalist.length">未找到数据</div>
</div>
</div>
</template>
<script>
export default {
data(){
return {
searchValue: '',
current: this.curData,
datalist:[],
isShow:false
}
},
props:{
curData:String, // 当前选中数据
itemData:Array, // 所有选项数据
isNeedSearch:{ // 是否需要搜索
type: Boolean,
default: true
},
placeholder:{ // 输入框提示文本
type: String,
default: '搜索'
},
},
created(){
this.datalist = this.itemData;
//点击组件以外的地方,收起
// document.addEventListener('click', (e) => {
// if (!this.$el.contains(e.target)){
// this.isShow = false;
// }
// }, false)
},
methods:{
search(e){
this.searchValue = e.target.value;
this.datalist = this.itemData.filter((item)=>{
return item.indexOf(this.searchValue) != -1;
});
},
clickItem(item){
this.current = item;
this.isShow = false;
this.$emit('change',item);
},
}
}
</script>
<style scoped lang="scss">
.vue-dropdown {
z-index:10;
width: 40vw;
border-radius:3px;
border: 1px solid #ccc;
cursor: pointer;
user-select:none;
-webkit-user-select:none;
position: relative;
&._self-show {
display: block!important;
}
.search-module {
position: relative;
border-bottom: 1px solid #ccc;
.search-text {
width: 100%;
height: 30px;
padding: 0 10px;
box-shadow: none;
outline: none;
border: none;
}
.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;
}
padding: 10px;
&:hover {
cursor:pointer;
color: #fff;
background: #00a0e9;
}
}
}
}
.list-and-search{
display: none;
background: #fff;
border: 1px solid #ccc;
position: absolute;
width: 100%;
&.on{
display: block;
}
}
.cur-name{
height: 32px;
line-height: 32px;
padding: 0 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;
}
}
}
.tip-nodata {
font-size: 14px;
padding: 10px;
}
</style>
父组件引用:
<selectSearch @change="dropDownClick" :curData="curData" :itemData="itemData"></selectSearch>
import selectSearch from '@/component/select-search.vue'
export default {
components: {
selectSearch,
},
data() {
return {
curData: '所有产品',
itemData: ['所有产品','梦幻西游','梦幻无双','大话西游'],
};
},
methods: {
dropDownClick(e) {
console.log(e)
}
},
}