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) }); }) }