Solution: Remove the readonly attribute of the drop-down box.
This component adds readonly back when blurring, so you have to remove readonly when blurring. After checking the source code of the select component, it is found that there is a 50 millisecond delay in user experience optimization when blurring, so the removal operation must also be an asynchronous operation.
<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>
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')
}
})
}
}