原因:
以下el-select主要代码是在document页面上,而el-dialog在点击关闭按钮时,从而关闭el-dialog后,会自动使el-select组件获取到焦点。
<el-popover
:visible="data.tipVisible"
ref="popover"
placement="left-start"
:title="title"
:width="200"
:content="tipContent"
>
<template #reference>
<el-select
ref="selectRef"
@visible-change="onVisibleChange"
v-model="data.queryParams.xxxNumber"
filterable
remote
reserve-keyword
:remote-method="handleRemoteMethod"
:loading="data.queryLoading"
@change="onChange"
value-key="xxxNumber"
>
<el-option
v-for="item in data.candidateList"
:key="item.xxxNumber"
:label="item.xxxNumber"
:value="item"
/>
</el-select>
</template>
</el-popover>
以上主要代码会在el-dialog上点击el-button,触发click事件并关闭el-dialog后,处于首界面的上述el-select会自动获取焦点。解决方法是:
const onFocus = (event)=>{
console.log("debugFocus", event);
if(event.relatedTarget !== null){
selectRef.value.blur();
}
}
给el-select绑定@focus事件(@focus="onFocus"
),在focus事件里判断是什么元素触发的焦点,从而控制失去焦点。