解决: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;}}</styl
·
一、解决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)
更多推荐
已为社区贡献16条内容
所有评论(0)