关于ElementUI 在ios上select组件无法弹出软键盘

Tai�?

已于 2023-05-16 16:31:59 修改

阅读量1.4k

点赞数 4

分类专栏：前端 Element UI 文章标签： elementui 前端 javascript ios vue.js

于 2023-05-16 16:20:37 首次发布

本文链接：https://blog.youkuaiyun.com/hupeje/article/details/130707729

版权

前端同时被 2 个专栏收录

1 篇文章

订阅专栏

Element UI

1 篇文章

订阅专栏

文章讲述了在使用element-ui的el-select组件并开启filterable搜索功能时，iOS设备无法弹出软键盘的问题。作者提供了两种解决方案，一种是通过hook:mounted和visible-change事件清除readonly属性，但这种方法需要在每个使用页面添加代码。另一种是创建自定义指令(v-clickoutside)，优化代码减少冗余。注意只有启用搜索时才需要添加此指令，否则可能导致意外行为。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

问题：该死的居然只适配桌面端！当el-select组件启用了filterable搜索功能，ios居然无法弹出软键盘搜索？

原因：

这个标红是导致无法弹出软键盘的罪魁祸首

理论方案：

方法一：很多人都是直接利用hook:mounted+visible-change方法去清除readonly属性，这里我不细讲，找找就有了哈

弊端：但是这样的话就得每次运用到el-select+filterable搜索的页面都得加上代码

方法二：今天去摸索出来的也就是利用（自定义指令），废话不多说直接上代码

  <el-select v-model="value"
             placeholder="请选择"
             ref="select"
             filterable
             v-clickoutside
             id="selectS">
    <el-option v-for="item in options"
               :key="item.value"
               :label="item.label"
               :value="item.value">
    </el-option>
  </el-select>

import Vue from "vue";
Vue.directive("clickoutside", {
  bind: function (el) {
    let dom = el.querySelector(".el-input__inner");
    dom.addEventListener("blur", function () {
      setTimeout(() => {
        dom.removeAttribute("readonly");
      }, 200);
    });
  },
});

所以我把他优化成自定义指令了，这样做就可以减少代码冗余。

注意：启用搜索才需要加上这个指令，不然会出现问题。会出现如果我不启用搜索也会出现软键盘。

如果觉得有用的话记得点下start哦，嘻嘻