解决:el-select组件在IOS移动端的2个兼容问题,点击2次才能选中 & 无法触发软键盘。

一、解决el-select下拉选项在ios点击2次才能选中(通过css解决,需确保css样式全局作用域)。

// App.vue
<style lang="scss">
 // to fix 在ios设备中,el-select组件下拉框,点击2次才能选中问题。
  .el-scrollbar {
    .el-scrollbar__bar {
        opacity: 1 !important;
    }
  }
</style>

二、解决el-select添加filter属性,点击输入时,无法触发软键盘的显示(主要是因为官方源代码实现中添加的readonly属性导致)。需注意:此时所有的el-select组件都必须添加filterable属性,否则会出现el-select没加filterable的,也可以点击光标输入,但是搜索无效,给用户造成误解。

// utils/element-ui-preprocessing.js

import ElementUI from 'element-ui'

// Fixes an issue with filters not working on mobile
(ElementUI.Select as any).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.DOCUMENT_NODE))

  return !(this.filterable || this.multiple || !isIE) && !this.visible
}

export default ElementUI
// main.js
import ElementUI from '@/utils/element-ui-preprocessing'
Vue.use(ElementUI)
  • 5
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值