不知道大家有没有聪明的客户需要输入框内数据悬停展示下拉框的内容,搜了全网也没找到,博主想了个方法记录一下,希望能帮到大家
第一步:
@mouseenter.native="changeactive"
重点是这行代码,鼠标触发方法
<el-select
v-model="value1"
multiple
size="mini"
ref="selectSearch"
style="width: 100%"
@mouseenter.native="changeactive"
:clearable="true"
filterable
allow-create
default-first-option
placeholder="请输入">
<el-option
v-for="(item,index) in tagList"
:key="index"
:label="item"
:value="index">
<span style="float: left">{{ item }}</span>
<i style="float: right;line-height: 35px;margin-right: -25px" class="el-icon-circle-close" @click="removeTag(item)"></i>
</el-option>
<div style="display: flex;justify-content: center;">
<el-button size="mini" @click="removeTagAll">清空</el-button>
</div>
</el-select>
第二步
ref自己定义的加上toggleMenu()就可以了
changeactive(){
if(this.value1.length!=0){
this.$refs.selectSearch.toggleMenu()
}
},
实现效果
鼠标移入,下拉框出现。
有疑惑大家评论区交流~