el-select單選時選擇后輸入框的is-focus狀態(tài)并沒有取消問題解決

更新時間：2024年01月10日 15:57:31 作者：君子使物，不為物使

這篇文章主要給大家介紹了關(guān)于el-select單選時選擇后輸入框的is-focus狀態(tài)并沒有取消問題的解決過程,文中通過圖文以及代碼示例將解決的辦法介紹的非常詳細(xì),需要的朋友可以參考下

前言
一、通過調(diào)試源碼發(fā)現(xiàn)
二、有devTools也可以觀察到，點(diǎn)擊選項后isFocused先變成false，又變成true
三、找一下點(diǎn)擊選項后發(fā)生了什么
四、經(jīng)過我的排除大法，有兩種情況會觸發(fā)的focus事件
五、效果如圖
總結(jié)

前言

前兩天在封裝組件的時候，發(fā)現(xiàn)el-select 單選時，選擇后輸入框的is-focus狀態(tài)并沒有取消，需要手動點(diǎn)其它地方才會取消，于是想著找找為什么

一、通過調(diào)試源碼發(fā)現(xiàn)

輸入框在點(diǎn)擊選項后觸發(fā)blur，緊接著又觸發(fā)了一次focus 1.狀態(tài)樣式由計算屬性"wrapperKls"控制，又與“isFocused”相關(guān)，且handleFocus和isFocused都由useFocusController提供

2.因此找到useFocusController的具體實現(xiàn)，加入console.log就能觀察到focus觸發(fā)情況

查看控制臺

二、有devTools也可以觀察到，點(diǎn)擊選項后isFocused先變成false，又變成true

實際上還是上方useFocusController中的handleFocus改變了其值

三、找一下點(diǎn)擊選項后發(fā)生了什么

深扒一下，干了4件事

ctx.emit(UPDATE_MODEL_EVENT, option.value)	// ctx.emit('update:modelValue', val) 更新雙向綁定的值
emitChange(option.value)	// 值改變的情況下調(diào)用 ctx.emit('change', val) 觸發(fā)el-select的change事件
states.visible = false	// 那么這時又發(fā)生了什么呢？
setSoftFocus()	/* 看起來像是這個方法導(dǎo)致的
	const _input = input.value || reference.value
    if (_input) {
      _input?.focus()
    }
*/

四、經(jīng)過我的排除大法，有兩種情況會觸發(fā)的focus事件

由states.visible改變觸發(fā)
由setSoftFocus()方法觸發(fā)

如果想在點(diǎn)擊選項后不觸發(fā)focus，那么就需要同時注釋這兩行代碼才行
在不破壞代碼功能的情況下，加入一個方法setSoftBlur和一個prop
用戶在單選時如果傳入了autoBlur，那么

 const setSoftBlur = () => {
    const _input = input.value || reference.value
    if (_input) {
      _input?.blur()
    }
  }

	/**
     * @description when select one item, click option will let input blur
     */
    autoBlur: Boolean,

tip:使用setTimeout涉及js任務(wù)隊列與事件循環(huán)，將在下方執(zhí)行setSoftFocus之后調(diào)用setSoftBlur()

五、效果如圖

第一個選擇框沒有

總結(jié)

到此這篇關(guān)于el-select單選時選擇后輸入框的is-focus狀態(tài)并沒有取消問題解決的文章就介紹到這了,更多相關(guān)el-select單選is-focus狀態(tài)沒有取消內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: