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

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章