526互联

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

发布时间 2023-10-11 17:44:29作者: 星小梦

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