vue2 element组件兼容性问题

news/2024/9/23 3:19:31/

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的兼容性问题


http://www.ppmy.cn/news/1468909.html

相关文章

..\USER\stm32f10x.h(298): error: #67: expected a “}“

原keil4的示例工程在用keil5打开之后出现报错&#xff1a; ..\USER\stm32f10x.h(298): error: #67: expected a "}" 在去掉手动添加的一个宏定义STM32F10X_HD后即可正常编译&#xff0c;因为KEIL5已经自动添加了

nginx mirror流量镜像详细介绍以及实战示例

nginx mirror流量镜像详细介绍以及实战示例 1.nginx mirror作用2.nginx安装3.修改配置3.1.nginx.conf3.2.conf.d目录下添加default.conf配置文件3.3.nginx配置注意事项3.3.nginx重启 4.测试 1.nginx mirror作用 为了便于排查问题&#xff0c;可能希望线上的请求能够同步到测试…

R语言绘图 --- 桑基图(Biorplot 开发日志 --- 5)

「写在前面」 在科研数据分析中我们会重复地绘制一些图形&#xff0c;如果代码管理不当经常就会忘记之前绘图的代码。于是我计划开发一个 R 包&#xff08;Biorplot&#xff09;&#xff0c;用来管理自己 R 语言绘图的代码。本系列文章用于记录 Biorplot 包开发日志。 相关链接…

JVM产生FullGC的原因有哪些?

JVM产生FullGC的原因有哪些&#xff1f; 在Java虚拟机&#xff08;JVM&#xff09;中&#xff0c;垃圾回收&#xff08;Garbage Collection&#xff0c;简称GC&#xff09;是一个非常重要的机制。GC的目的是自动管理内存&#xff0c;回收不再使用的对象&#xff0c;防止内存泄…

MarsCesium使用问题汇总

1.Cannot read properties of undefined “startdraw” 启用生命周期&#xff0c;在index.vue中引入&#xff1a; import useLifecycle from "mars/common/uses/use-lifecycle"useLifecycle(mapWork)

华为云开发者社区活动-基于MindNLP的ChatGLM-6B聊天机器人体验

MindNLP ChatGLM-6B StreamChat 本案例基于MindNLP和ChatGLM-6B实现一个聊天应用。支持流式回复。 本活动通过配置环境&#xff0c;模型接入&#xff0c;以及gradio前端界面搭建&#xff0c;实现了聊天机器人的功能。 以下是一些体验记录&#xff1a; 有兴趣的可以通过以下链…

功率 MOSFET、其电气特性定义

本应用笔记介绍了功率 MOSFET、其电气特性定义和使用说明。介绍了功率MOSFET的破坏机制和对策及其应用和电机驱动应用。 电气特性定义及使用说明 功率 MOSFET 额定值 导通电阻R_DS(on)与耐压V_DSS的关系 图2表示耐压VDSS20&#xff5e;100V额定元件与导通电阻R_DS(on)之间的…

PWN环境配置

虚拟机安装 镜像下载网站(http://old-releases.ubuntu.com/releases/)虚拟机建议硬盘 256 G 以上&#xff0c;内存也尽量大一些。硬盘大小只是上界&#xff0c;256 G 不是真就占了 256G&#xff0c;而后期如果硬盘空间不足会很麻烦。lsb_release -a查看版本更换 ubuntu 镜像源…