参考文章: ios移动端（手机、ipad）使用el-select的远程搜索无法唤起软键盘

解决方案：去除下拉框的readonly属性即可

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<el-form-item label="检测型号" size="small" prop="testModel">
  <el-select
    filterable
    ref="select"
    @blur.native.capture="onblur"
    @hook:mounted="cancalReadOnly"
    @visible-change="cancalReadOnly"
    :popper-append-to-body="false"
    v-model="ruleForm.testModel"
    placeholder="请选择型号"
  >
    <el-option
      v-for="(item, index) in testModelArr"
      :key="index"
      :label="item.model_name"
      :value="item.model_name"
    ></el-option>
  </el-select>
</el-form-item>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
methods: {
  // 失去焦点
  onblur() {
    setTimeout(() => {
      if(/(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent)){ //判断iPhone|iPad|iPod|iOS
        this.$refs.select.blur()
      }
      var scrollHeight = document.documentElement.scrollTop || document.body.scrollTop ||0;
      window.scrollTo(0,Math.max(scrollHeight - 1,0))
    }, 100);
  },
  // 取消只读
  cancalReadOnly(onOff) {
    this.$nextTick(()=>{
      if(!onOff){
        const { select } = this.$refs;
        const input = select.$el.querySelector('.el-input__inner')
        input.removeAttribute('readonly')
      }
    })
  }
}
  • Vue3中通过watch函数代替Vue2中的@hooks:mounted
    1
    2
    3
    4
    5
    6
    7
    const selectref = ref(null)

    watch(() => selectref.value, (val) => {
      if (val) {
        cancalReadOnly(false)
      }
    })