关于ElementUI 在ios上select组件无法弹出软键盘

问题:该死的居然只适配桌面端!当el-select组件启用了filterable搜索功能,ios居然无法弹出软键盘搜索?

原因

 这个标红是导致无法弹出软键盘的罪魁祸首

理论方案

方法一:很多人都是直接利用hook:mounted+visible-change方法去清除readonly属性,这里我不细讲,找找就有了哈

弊端:但是这样的话就得每次运用到el-select+filterable搜索的页面都得加上代码

方法二:今天去摸索出来的也就是利用(自定义指令),废话不多说直接上代码

  <el-select v-model="value"
             placeholder="请选择"
             ref="select"
             filterable
             v-clickoutside
             id="selectS">
    <el-option v-for="item in options"
               :key="item.value"
               :label="item.label"
               :value="item.value">
    </el-option>
  </el-select>
import Vue from "vue";
Vue.directive("clickoutside", {
  bind: function (el) {
    let dom = el.querySelector(".el-input__inner");
    dom.addEventListener("blur", function () {
      setTimeout(() => {
        dom.removeAttribute("readonly");
      }, 200);
    });
  },
});

所以我把他优化成自定义指令了,这样做就可以减少代码冗余。

注意:启用搜索才需要加上这个指令,不然会出现问题。会出现如果我不启用搜索也会出现软键盘。

如果觉得有用的话记得点下start哦,嘻嘻

  • 4
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 6
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 6
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值