el-select移动端唤不出软键盘

一、场景:
        移动端使用element UI,select组件点击未唤起软键盘
二、原因:
        el-select组件在移动端会默认加上readonly属性
        在Element Plus中已经优化了该问题

三、解决办法:
        获取对应select组件,手动移除readonly属性,代码如下:

<el-select
     v-model="projectInfo"
     :size="$attrs.size"
     style="width: 100%"
     ref="select"
     @focus="clear"
     @hook:mounted="clear"
     @visible-change="clear"
  >
     <el-option
         v-for="op in project"
         :key="op.value"
         :label="op.label"
         :value="op.value"
     >
     el-option>
 el-select>
clear(async) {
      this.$nextTick(() => {
        if (!async) {
          // ios 手机有延迟问题
          setTimeout(() => {
			// 情况一:单个
            const { select } = this.$refs
            const inputs = select.$el.querySelector('.el-input__inner')
            inputs.removeAttribute('readonly')
			
			// 情况二:表单中存在多个select   problemInfo表单ref
			const { problemInfo } = this.$refs;
            const inputs = problemInfo.$el.querySelectorAll(".el-input__inner");

            for (var i = 0; i < inputs.length; i++) {
              inputs[i].removeAttribute("readonly");
            }
          }, 200)
        }
      })
    }

你可能感兴趣的:(elementui,vue,javascript,前端)