页面中
<div>
<el-select
v-model="$store.state.user.productVal"
placeholder="请选择"
class="select-el"
filterable
@focus="getKeyBoard"
@hook:mounted="getKeyBoard"
@visible-change="getKeyBoard"
ref="getKeyBoardEl"
>
<el-option
v-for="item in businessChild"
:key="item.id"
:label="item.product_name"
:value="item.id"
>
</el-option>
</el-select>
</div>
JS代码
methods:{
// 解决ios无法唤起软键盘的问题
getKeyBoard(async) {
this.$nextTick(() => {
if (!async) {
// ios 手机有延迟问题
setTimeout(() => {
const { getKeyBoardEl } = this.$refs;
const input = getKeyBoardEl.$el.querySelector(".el-input__inner");
input.removeAttribute("readonly");
}, 200);
}
});
},
}
IOS二次点击问题
// to fix 在ios设备中,el-select组件下拉框,点击2次才能选中问题。 全局样式
.el-scrollbar .el-scrollbar__bar {
opacity: 1 !important;
}