问题

element UI 中有一个el-select组件。我们经常用它来实现下拉框功能。 但是在手机上使用时，发现iOS手机上，该组件无法唤起软键盘。

主要是因为 组件中，input上有一个readonly 属性，而该属性规定输入字段为只读。阻止了用户对值进行修改，直到满足某些条件才行。

方案

// 本案例只为处理兼容问题，不包含其他复杂逻辑
<template>
    <el-select
        ref="select"
        @focus="clear"
        @hook:mounted="clear"
        @visible-change="clear"
    >
    </el-select>
</template>
<script>
    export default {
        methods: {
            clear(async) {
                this.$nextTick(() => {
			        if (!async) {
			          // ios 手机有延迟问题
			          setTimeout(() => {
			            const { select } = this.$refs
			            const input = select.$el.querySelector('.el-input__inner')
			            input.removeAttribute('readonly')
			          }, 200)
			        }
			     })
            }
        }
    }
</script>

二次点击问题

el-select下拉选项在ios上，需要点击2次才能选中（通过css解决，需确保css样式全局作用域）

// App.vue
<style lang="scss">
 // to fix 在ios设备中，el-select组件下拉框，点击2次才能选中问题。
 .el-scrollbar .el-scrollbar__bar {
    opacity: 1 !important;
 }
</style

完成以上操作就可以正常使用了。

clearable 清空问题

如果el-select 还增加了clearable清空功能，会发现当你点击选中时，首先会出现清空按钮，二次点击才能弹出软键盘。

// 我们增加一个 showClose，用来控制 clearable 显示隐藏。

<template>
    <el-select
        ref="select"
        @focus="clear"
        :clearable="showClose"
        @hook:mounted="clear"
        @visible-change="clear"
        @blur.native.capture="onblur"
    >
    </el-select>
</template>
<script>
    export default {
    	data(){
    		return{
    			showfalse:false,
    		}
    	},
        methods: {
            clear(onOff) {
            	if (onOff) { // 打开下拉框 显示可清空按钮
					this.showClose = true
				}
				this.$nextTick(() => {
			        if (!async) {
			          // ios 手机有延迟问题
			          setTimeout(() => {
			            const { select } = this.$refs
			            const input = select.$el.querySelector('.el-input__inner')
			            input.removeAttribute('readonly')
			          }, 200)
			        }
			     })
                
            },
            // 失去焦点时，需要把软键盘收起
			onblur() {
				setTimeout(() => {
					if (/(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent)) { //判断iPhone|iPad|iPod|iOS
						this.$refs.select.blur();
					}
					this.showClose = false
			}
        }
    }
</script>

这种办法

其实我个人觉得，在移动端也不太需要clearable功能，因此我做了一个判断。在移动端的情况下，clearable 值设为 false

 mounted () {
    if (/(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent)) { // 判断iPhone|iPad|iPod|iOS
      this.showClose = false
    }
  }