前提
el-select组件有添加filterable属性,@visible-change事件。
操作
两三个el-select选项框,选中第一个选项框选择对应内容month,然后切换到记事本去copy数据"year"或者“month”,就是options中有的数据,此时再切换到该页面,选项框会自动聚焦,下拉框自动弹出。
要求
copy后要求下拉框不自动弹出。
解决
@visible-change事件中手动控制下拉框的focus和blur事件。
<el-select
v-model="value"
filterable
:filterable-methed="filterableMethed"
ref="select"
@blur="handleBlur"
@visible-change="handleVisibleChange(...arguments,'select')"
@change="handleChange"
>
<el-options key="month" value="month" label="month">month</el-options>
<el-options key="year" value="year" label="year">year</el-options>
<el-options key="day" value="day" label="day">day</el-options>
</el-select>
export default{
data(){
return {
value:''
}
},
methods:{
// 异步修改
handleVisibleChange(val,prop){
if (val) {
this.$refs[prop].focus()
} else {
this.$refs[prop].blur()
}
...
},
// change事件
handleChange(value){
this.value = value
},
// 失去焦点
handleBlur(){
setTimeOut(()=>{
this.$refs['select'].blur()
},100)
},
// 模糊查询
filterableMethed(keyword=''){
...
},
}
}
参考文献: