移送端使用Element el-select 远程搜索组件问题
1、点击输入框，无法调起键盘
2、输入中文，无法触发搜索方法
解决方案
<template>
<el-select ref="headerSearchSelect" filterable v-model="id" remote :remote-method="remoteMethod" placeholder="请输入名称进行选择" @focus="clear" @hook:mounted="clear" @visible-change="clear">
<el-option v-for="item in listData" :key="item.id" :label="item.name" :value="item.id"></el-option>
</el-select>
</template>
<script>
mounted() {
this.$nextTick(() => {
// 解决IOS 输入中文，无法触发el-select remote-method方法
const { headerSearchSelect } = this.$refs;
const input = headerSearchSelect.$el.querySelector('.el-input__inner')
//监听事件，查询下拉框
input.addEventListener('compositionend', e =>{
this.remoteMethod(e.target.value)
});
})
},
methods: {
// 解决el-select remote 在IOS上无法调出键盘的问题
clear(async) {
this.$nextTick(() => {
if (!async) {
// ios 手机有延迟问题
setTimeout(() => {
const { headerSearchSelect } = this.$refs;
const input = headerSearchSelect.$el.querySelector('.el-input__inner')
input.removeAttribute('readonly')
}, 200);
}
});
},
// 远程搜索
remoteMethod(query) {
console.log('当前搜索内容', query)
},
}
</script>
