el-select filterable模糊搜索在iOS手机上无法弹出软键盘,解决方案

2024-12-22 14:06:10 | 前端Number of visitors 185

页面中

<div>
    <el-select
        v-model="$store.state.user.productVal"
        placeholder="请选择"
        class="select-el"
        filterable
        @focus="getKeyBoard"
        @hook:mounted="getKeyBoard"
        @visible-change="getKeyBoard"
        ref="getKeyBoardEl"
        >
          <el-option
                v-for="item in businessChild"
                :key="item.id"
                :label="item.product_name"
                :value="item.id"
          >
          </el-option>
    </el-select>
</div>
   

JS代码

methods:{
    // 解决ios无法唤起软键盘的问题
    getKeyBoard(async) {
        this.$nextTick(() => {
            if (!async) {
                // ios 手机有延迟问题
                setTimeout(() => {
                    const { getKeyBoardEl } = this.$refs;
                    const input = getKeyBoardEl.$el.querySelector(".el-input__inner");
                    input.removeAttribute("readonly");
                }, 200);
            }
        });
    },
}

IOS二次点击问题


 // to fix 在ios设备中,el-select组件下拉框,点击2次才能选中问题。 全局样式
 .el-scrollbar .el-scrollbar__bar {
    opacity: 1 !important;
 }



send发送