一、解决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)
Logo

前往低代码交流专区

更多推荐