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的错误配置 可以用如下配置在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的兼容性问题