原因:
以下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事件裏判斷是什麼元素觸發的焦點,從而控制失去焦點。