欢迎来到尧图网

客户服务 关于我们

您的位置:首页 > 文旅 > 八卦 > vue2 element组件兼容性问题

vue2 element组件兼容性问题

2024/10/24 9:29:35 来源:https://blog.csdn.net/Chen_JH001/article/details/139521160  浏览:    关键词:vue2 element组件兼容性问题

1.el-select

聚焦问题 + 点两次才可以选择选项

 <el-select name="XXX" v-model="form.XXX" clearable style="width: 100%":popper-append-to-body="false" popper-class="popper-select-class"@change="XXX"><el-optionv-for="item in XXX":key="item.XXX":label="item.XXX":value="item.XXX"></el-option></el-select>

如果多选框因为配置了fastclick会出现ios系统打开点击buig,这个是fastclick的错误配置 可以用如下配置在main.js中 

import FastClick from 'fastclick'
// 解决手指轻触输入框不聚焦的问题
try {let versionNumber = navigator.userAgent.toLowerCase().match(/cpu iphone os (.*?) like mac os/)[1].replace(/_/g, '.')if (!(/iphone|ipod|ipad/i.test(navigator.appVersion)) || Number(versionNumber) < 11) {// 解决手指轻触输入框不聚焦的问题var deviceIsWindowsPhone = navigator.userAgent.indexOf('Windows Phone') >= 0var deviceIsIOS = /iP(ad|hone|od)/.test(navigator.userAgent) && !deviceIsWindowsPhoneFastClick.prototype.focus = function (targetElement) {var length// Issue #160: on iOS 7, some input elements (e.g. date datetime month) throw a vague TypeError on setSelectionRange. These elements don't have an integer value for the selectionStart and selectionEnd properties, but unfortunately that can't be used for detection because accessing the properties also throws a TypeError. Just check the type instead. Filed as Apple bug #15122724.if (deviceIsIOS && targetElement.setSelectionRange && targetElement.type.indexOf('date') !== 0 && targetElement.type !== 'time' && targetElement.type !== 'month') {length = targetElement.value.lengthtargetElement.setSelectionRange(length, length)targetElement.focus()} else {targetElement.focus()}}FastClick.attach(document.body)}
} catch (e) {console.log(e)
}

另外还需要配置一个css在对应组件的style中

  .el-input .el-input__suffix {display: none;}.popper-select-class{&.el-popper{.el-scrollbar {> .el-scrollbar__bar {opacity: 1 !important;}}}}

这样就能轻松解决选择框在ios的兼容性问题

版权声明:

本网仅为发布的内容提供存储空间,不对发表、转载的内容提供任何形式的保证。凡本网注明“来源:XXX网络”的作品,均转载自其它媒体,著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明出处。

我们尊重并感谢每一位作者,均已注明文章来源和作者。如因作品内容、版权或其它问题,请及时与我们联系,联系邮箱:809451989@qq.com,投稿邮箱:809451989@qq.com