border-right: 6px solid transparent;
border-bottom: 6px solid #7b7b7b;
border-left: 6px solid transparent;
border-top: 6px solid transparent;
}
}
}
.vue-dropdown.default-theme {
width: 200px;
z-index:10;
border-radius:3px;
border: 1px solid #ccc;
cursor: pointer;
-webkit-user-select:none;
user-select:none;
&._self-show {
display: block!important;
}
.search-module {
position: relative;
border-bottom: 1px solid #ccc;
.search-text {
width: 100%;
height: 30px;
text-indent: 10px;
// border-radius: 0.5em;
box-shadow: none;
outline: none;
border: none;
// &:focus {
// border-color: #2198f2;
// }
}
.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;
}
margin-top: 0.4em;
padding: 0.4em;
&:hover {
cursor:pointer;
color: #fff;
background: #00a0e9;
}
}
}
}
.tip-nodata {
font-size: 14px;
padding: 10px 0;
text-indent: 10px;
}
</style>
父组件调用
<dropdown :item-click="dropDownClick" :isNeedSearch="true" :itemlist="itemlist"></dropdown>
import Dropdown from '@/components/dropdown.vue'
export default {
data() {
return {
itemlist: {
cur: {
val: "",
name: "所有产品"
},
data: [{
val: "",
name: "所有产品"
}, {
val: 1,
name: "梦幻西游"
}, {
val: 2,
name: "梦幻无双"
}, {
val: 3,
name: "大话西游"
}] },
}
},
components: {
Dropdown,
},
methods :{
dropDownClick(e) {
console.log(e.name, e.val)
}
}
}默认是不带搜索框，如果需要可以传这个:
isNeedSearch="true"。ps：下面看下vue组件实践-可搜索下拉框
实践加深对vue的理解和运用有效途径，本文是基于vue的可搜索下拉框定制组件实现，在此记录.
一、效果
二、组件代码
dropdown.vue
<template>
<div class="vue-dropdown default-theme" v-show-extend="show">
<div class="search-module clearfix" v-show="itemlist.length">
<input class="search-text"
@keyup='search($event)' :placeholder="placeholder" />
