本人的vue项目使用element-ui中的下拉选框,同时将它设置为可输入的形式,但是在移动端中,下拉选项阻挡了键盘弹起,请问有什么方法可以解决这个问题吗?

本人的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-uiel-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')
        }
      })
  }
}