在H5页面使用el-select的兼容性处理(IOS)

出现问题

在H5页面中，使用el-select会导致ios用户聚焦时无法唤起软键盘，据说是因为readonly这个属性导致的，官方一直没有修复，所以我们需要手动处理。

解决方法

template代码部分
这里的四个属性是必须的

 <el-select
      ref="agentSelect"
      @blur.native.capture="onblur"
      @hook:mounted="cancalReadOnly"
      @visible-change="cancalReadOnly"
    >

js代码部分

    cancalReadOnly(onOff) {
      this.$nextTick(() => {
        if (!onOff) {
          const Selects = this.$refs;
          const input =
            Selects.agentSelect.$el.querySelector(".el-input__inner");
          input.removeAttribute("readonly");
          this.$refs.agentSelect.blur(); // 自行判断是否添加
        }
      });
    },
    // 失去焦点
    onblur() {
      setTimeout(() => {
       //判断iPhone|iPad|iPod|iOS
        if (/(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent)) {
          this.$refs.agentSelect.blur();// 自行判断是否添加
        }
        var scrollHeight =
          document.documentElement.scrollTop || document.body.scrollTop || 0;
        window.scrollTo(0, Math.max(scrollHeight - 1, 0));
      }, 100);
    },

this.$refs.agentSelect.blur(); // 自行判断是否添加
看到这句代码了吗，如果没有这句代码，可能会导致关闭软键盘的时候不能正常失去焦点，我目前还没有见到不加这句代码还是正常的情况，所以我建议直接加上

后记

这是只有一个el-select的情况，有多个的话应该自己能修改好，代码不长，如果有别的好方法，欢迎分享，如果有帮助，请点个赞，谢谢