问题描述
提示:这里描述项目中遇到的问题:
el-select添加 filterable 属性,支持搜索,在 ios 手机上无法唤起软件盘进行搜索
原因分析:
提示:这里填写问题的分析:
主要是因为 el-select 组件中, input 上有一个 readonly 属性,而该属性规定输入字段为只读。
解决方案:
提示:这里填写该问题的具体解决方案:
通过 focus 、 hook:mounted 、visible-change 删除 readonly 属性
// 本案例只为处理兼容问题,不包含其他复杂逻辑
<template>
<el-select
filterable
ref="select"
@focus="clear"
@hook:mounted="clear"
@visible-change="clear"
>
</el-select>
</template>
<script>
export default {
methods: {
clear(async) {
this.$nextTick(() => {
if (!async) {
// ios 手机有延迟问题
setTimeout(() => {
const { select } = this.$refs
const input = select.$el.querySelector('.el-input__inner')
input.removeAttribute('readonly')
}, 200)
}
})
}
}
}
</script>