ElementPlus el-select自动获取焦点问题

原因:
以下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事件里判断是什么元素触发的焦点,从而控制失去焦点。

posted @ 2023-10-11 17:35  星小梦  阅读(2216)  评论(0编辑  收藏  举报