解决el-select在IOS移动端上，搜索功能不弹出软键盘

一：问题

在ios移动端使用 el-select 组件，且启用filterable后，无法弹出软键盘。

观察存在readonly="readonly"属性，猜测可能是问题的原因。

二：解决

在项目中，注册一个全局自定义指令。

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

然后再需要解决的地方使用该指令。

<el-select
  filterable
  remote
  placeholder="请输入"
  v-removeReadonly
>
  <el-option
    v-for="item in serverOptions"
    :key="item.id"
    :label="item.name"
    :value="item.id"
  >
  </el-option>
</el-select>