el-select远程搜索在ios移动设备无法调用键盘、中文无效登问题

最新推荐文章于 2025-05-13 14:40:59 发布

QovLovQ

最新推荐文章于 2025-05-13 14:40:59 发布

阅读量734

点赞数 2

CC 4.0 BY-SA版权

文章标签： ios vue.js javascript elementui

本文链接：https://blog.csdn.net/athqwer/article/details/140269861

1、问题一：el-select远程搜索在ios移动设备无法调用键盘

解决：

1、给el-select设置ref

2、el-select添加

@hook:mounted="cancelReadOnly"
@visible-change="cancelReadOnly"

3、编写cancelReadOnly的代码逻辑

//解决ios手机无法调用键盘
    cancelReadOnly(onOff) {
      this.$nextTick(() => {
        if (!onOff) {
          // ios 手机有延迟问题
          setTimeout(() => {
            const { selectInfo } = this.$refs
            const input = selectInfo.$el.querySelector('.el-input__inner')
            input.removeAttribute('readonly')
          }, 200)
        }
      });
    },

2、问题二：el-select远程搜索在ios移动设备中文无效

解决：

1、需要使用el-select的ref，所以需要提前设置

2、代码如下：

 this.$nextTick(() => {
      // 解决IOS 输入中文，无法触发el-select remote-method方法
      const { selectInfo } = this.$refs;
      const input = selectInfo.$el.querySelector('.el-input__inner')
      //监听事件，查询下拉框
      input.addEventListener('compositionend', e =>{
        this.getIntervieweeList(e.target.value)
      });
    })

3、主要代码展示

<el-select
  ref="selectInfo"
  @hook:mounted="cancelReadOnly"
  @visible-change="cancelReadOnly"
  @blur.native.capture="onblur"
  clearable
  filterable
  remote
  reserve-keyword
  :remote-method="getList"
  placeholder="请输入">
  </el-option>
</el-select>

    //解决ios手机无法调用键盘
    cancelReadOnly(onOff) {
      // if (onOff) { // 打开下拉框 显示可清空按钮
      //   this.showClose = true
      // }
      this.$nextTick(() => {
        if (!onOff) {
          // ios 手机有延迟问题
          setTimeout(() => {
            const { selectInfo } = this.$refs
            const input = selectInfo.$el.querySelector('.el-input__inner')
            input.removeAttribute('readonly')
          }, 200)
        }
      });
    },

mounted() {

this.$nextTick(() => {
      // 解决IOS 输入中文，无法触发el-select remote-method方法
      const { selectInfo } = this.$refs;
      const input = selectInfo.$el.querySelector('.el-input__inner')
      //监听事件，查询下拉框
      input.addEventListener('compositionend', e =>{
        this.getIntervieweeList(e.target.value)
      });
    })

}