element-ui的el-select在ios的兼容性適配

今天的我在做一個(gè)h5的項(xiàng)目，發(fā)現(xiàn)element-plus（我使用的版本是2.2.19）里的el-select在ios上需要點(diǎn)擊2次才能打開下拉框。經(jīng)過很久的研究和查閱無數(shù)資料（包括百度、谷歌搜索到的），都沒有解決這個(gè)問題。最后我探究里面的根本原因，最后才自己找到解決方案， 可以仔細(xì)閱讀這篇文章，幫助大家避坑。

1. 在ios移動(dòng)端的表現(xiàn)

當(dāng)我們使用el-select組件的時(shí)候，安卓手機(jī)表現(xiàn)正常，pc端也表現(xiàn)正常，但是ios上表現(xiàn)就不正常了，主要體現(xiàn)在一下幾點(diǎn)：

1. 在ios上，點(diǎn)擊該組件第一次不能打開下拉選項(xiàng)；
2. 進(jìn)一步探索，當(dāng)沒有默認(rèn)值的時(shí)候，第一次點(diǎn)擊事件就可以打開下拉選項(xiàng)，但是當(dāng)有默認(rèn)值的時(shí)候，就會(huì)出現(xiàn)先聚焦該組件，下拉框沒有出現(xiàn)，在聚焦過后，在進(jìn)行一次點(diǎn)擊，才能打開下拉選項(xiàng)；

2. 尋找解決方案

發(fā)現(xiàn)這個(gè)問題后，我們在搜索引擎上查了好多的解決方案，但是并沒有找到解決以上的問題，現(xiàn)在我把我找到的最多的解決方案列出來，并說明原因：

1. 如何解決el-select下拉框在ios上 點(diǎn)擊兩次才能選中的問題
   這個(gè)解決方案，我看了一下，我也進(jìn)行了嘗試，但是沒有解決以上的相關(guān)問題，原因主要是，.el-scrollbar .el-scrollbar__bar這個(gè)樣式，其實(shí)是下拉框里面的樣式，解決的應(yīng)該是下拉框里面的選項(xiàng)在ios里面的需要點(diǎn)擊2次才能選中的問題。
2. vue3 element plus ios點(diǎn)擊時(shí)無法獲取焦點(diǎn)
   這種，1、FastClick該庫我并沒有進(jìn)行嘗試，因?yàn)槭褂昧藭?huì)導(dǎo)致項(xiàng)目太臃腫；2、el-input加了 ‘user-select’: ‘none’，該方法我進(jìn)行了嘗試，并沒有解決。

3. 獨(dú)立解決

在以上各種查詢和探索下，并沒有解決我的問題，所以，只能我自己尋找解決方案，其實(shí)應(yīng)該是element-plus在iosde 兼容性問題。

(1) 方案一：移動(dòng)端替換了element

實(shí)現(xiàn)上就是，當(dāng)是移動(dòng)端的時(shí)候，我們使用vant的ui庫來實(shí)現(xiàn)移動(dòng)端的兼容性。該方案就是需要大量的資源來實(shí)現(xiàn)，但是是最好的解決方案，因?yàn)?code>element在移動(dòng)端的體驗(yàn)很不友好。

(2) 方案二：繼續(xù)使用element做兼容

這個(gè)兼容性方案我在探索的過程中非常痛苦，當(dāng)時(shí)不知道是怎么產(chǎn)生的。但是經(jīng)過我不懈努力的嘗試，終于找到了一個(gè)由CSS就可以解決點(diǎn)擊2次的問題。

主要的問題就出現(xiàn)在上面的這2張圖片上，第一張圖片是沒有點(diǎn)擊的時(shí)候，第二張圖片是第一次點(diǎn)擊后，可以發(fā)現(xiàn)問題，點(diǎn)擊后，span里面進(jìn)行了if切換，而在ios里面，這個(gè)切換后，點(diǎn)擊動(dòng)作就消失了，所以我懷疑可能是這個(gè)el-select右側(cè)的icon導(dǎo)致的，所以我進(jìn)行了一輪嘗試，把這一整個(gè)span的dom進(jìn)行display: none;，發(fā)現(xiàn)一次點(diǎn)擊就可以出發(fā)下拉框的出現(xiàn)，這個(gè)也是為什么一定要有默認(rèn)值才能需要點(diǎn)擊2次，因?yàn)闆]有默認(rèn)值，上面的if是不會(huì)切換的。


順著這個(gè)思路，是這個(gè)span導(dǎo)致的問題，那我就進(jìn)行了一系列嘗試，針對span寫入一些CSS，最后讓我找到了，display: contents

.el-input .el-input__suffix {
	display: contents;
}

大概原理可以就是讓這個(gè)span沒有邊框等，這樣點(diǎn)擊事件就可以透下去（猜測，后面我會(huì)弄清楚），這個(gè)也只是在ios上才有這個(gè)問題。

如果大家也遇到了這個(gè)問題，大家可以進(jìn)行嘗試文章來源地址http://www.zghlxwxcb.cn/news/detail-800906.html

總結(jié)

1. 在移動(dòng)端上有各種奇葩的兼容性問題，需要耐心去對待
2. 當(dāng)前的這個(gè)問題，我提出了以上的2種解決方案，如果有好的解決方案，可以給我留言，謝謝

到了這里，關(guān)于element-ui的el-select在ios移動(dòng)端的兼容性適配的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！