項(xiàng)目場(chǎng)景：
運(yùn)行環(huán)境：vue@3.2.37, element-plus@2.2.9
問題描述
element-plus 的 Select 組件可以通過 filterable 屬性開啟搜索功能，該組件在iOS系統(tǒng)中，點(diǎn)擊組件輸入框，無法喚起軟鍵盤。
原因分析：
此bug自 element-ui 就有了，是該組件內(nèi)部輸入框的 readonly 屬性導(dǎo)致的問題。
解決方案：
1. element-ui
這個(gè)bug element-ui 和 element-plus 都有，可以參考這篇文章：ElementUI的Select組件在IOS喚不起軟鍵盤解決 。
注意：此方案在 element-plus 下有bug，首次點(diǎn)擊仍然概率無法喚起軟鍵盤。
<el-select
v-model="value"
placeholder="Select"
ref="select"
@hook:mounted="cancalReadOnly(false, 'select')"
@visible-change="(value) => cancalReadOnly(value, 'select')"
>
<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
</el-select>
cancalReadOnly(value, refTxt) {
this.$nextTick(() => {
if(!value) {
this.$refs[refTxt]?.$el?.querySelector('.el-input__inner')?.removeAttribute('readonly')
}
})
},
此方案，總結(jié)一下，就是在Select組件 mounted 以及 Select下拉框隱藏時(shí)，移除Select組件內(nèi)部輸入框的readonly屬性。
分別避免首次、后續(xù)點(diǎn)擊輸入框時(shí)無法喚起軟鍵盤。
2. element-plus
element-plus 下未能解決的原因在于vue3中去除了這個(gè)鉤子 hook:mounted (參考：Vue官方文檔里沒告訴你的神秘鉤子——@hook)。
hook:mounted 綁定了Select組件的mounted方法。
前面也總結(jié)過，vue3.x下此鉤子的失效導(dǎo)致了無法避免首次點(diǎn)擊產(chǎn)生的bug。那么，能否使用其它鉤子，或者DOM原生事件取代它呢？
element-plus 解決方案
Select組件并不支持其它的DOM原生事件，但它提供了插槽?？梢酝ㄟ^監(jiān)聽插槽內(nèi)元素的加載，或者直接插入一個(gè)測(cè)試元素在Select組件內(nèi)，間接監(jiān)聽Select組件是否加載完畢。
示例：
由于圖片元素支持onload事件，在Select組件內(nèi)添加一張圖片。需添加樣式隱藏該圖片，圖片內(nèi)容無用，所以大小應(yīng)盡量小。
<el-select
v-model="value"
placeholder="Select"
ref="select"
@visible-change="(value) => cancalReadOnly(value, 'select')"
>
<img style="display:none" @load="cancalReadOnly(false, 'select')" src="@/assets/images/ios-keyboard-bug.png" />
<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
</el-select>
也可將圖片放在Select插槽內(nèi)，不過插槽有邊距等樣式問題文章來源：http://www.zghlxwxcb.cn/news/detail-420126.html
其它未驗(yàn)證方案
vue3.0 項(xiàng)目中 el-select ios 無法喚起軟鍵盤解決
ElementUI的Select組件在IOS喚不起軟鍵盤文章來源地址http://www.zghlxwxcb.cn/news/detail-420126.html
到了這里，關(guān)于[BUG記錄] element-ui / element-plus 的 Select 可搜索組件在 iOS 下無法喚起軟鍵盤的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
