上一篇:el-select 可搜索下拉框 在ios、ipad 无法唤出键盘,造成无法输入
【效果图】:分组展示选项 =>【去界面操作体验】
el-select 可搜索下拉框,选中选项后,希望立即失去焦点,收起键盘,执行其他逻辑:我的是页面跳转
<el-select @hook:mounted="removeReadOnly" @visible-change="removeReadOnly"
v-model="innerValue"
filterable
:remote="true"
:likeQuery="false"
@change="changeSelect"
:clearable="clearable"
:multiple="multiple"
:remote-method="fetchOptions"
size="small"
popper-class="productGroupSelector"
:placeholder="placeholder"
ref="iosSelect"
>
js代码:
changeSelect(val) {
console.log("选项变更值:"+val)
if (this.multiple) {
this.options.forEach(item => {
const arr = item.options.map(m => m.value);
item.isIndeterminate = arr.some(v => {
return val.some(s => s === v);
});
item.checked = arr.every(v => {
return val.some(s => s === v);
});
if (item.checked) {
item.isIndeterminate = false;
}
});
this.$emit('change', this.innerValue);
} else {
this.$emit('change', val);
}
// iPad 兼容:延迟 50ms 后失焦(确保键盘能正常关闭)
setTimeout(() => {
const input = this.$refs.iosSelect?.$el?.querySelector('input');
input?.blur();
}, 50);
},