本人的vue项目使用element-ui中的下拉选框,同时将它设置为可输入的形式,但是在移动端中,下拉选项阻挡了键盘弹起,请问有什么方法可以解决这个问题吗?
在全局新建一个js文件,写入以下代码
import ElementUi from 'element-ui';
// Fixes an issue with filters not working on mobile
ElementUi.Select.computed.readonly = function () {
// trade-off for IE input readonly problem: https://github.com/ElemeFE/element/issues/10403
const isIE = !this.$isServer && !Number.isNaN(Number(document.documentMode));
return !(this.filterable || this.multiple || !isIE) && !this.visible;
};
export default ElementUi;
在main.js文件中导入
import Element from '文件地址'
造成这个问题的原因是element-ui
中el-select
中的搜索框默认是readonly
的,在IOS中是不能调起键盘的。只要移除这个属性就可以了.
<el-select ref="select" @visible-change="cancalReadOnly" @hook:mounted="cancalReadOnly">
// ...
</el-select>
methods: {
cancalReadOnly(open) {
this.$nextTick(() => {
if (!open) {
const select = this.$refs.select
const input = select.$el.querySelector('.el-input__inner')
input.removeAttribute('readonly')
}
})
}
}