本文实例为大家分享了vue组件实现可搜索下拉框的具体代码，供大家参考，具体内容如下
一、效果
二、代码
dropdown-ext.vue
-
:style="itemTextStyle">{{item.name}}
:class="item.statusClass">
@H_502_29@
.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;
}
}
}
}
