Element UI - VueJS - 在 IOS 上选择输入双击错误
Posted
技术标签:
【中文标题】Element UI - VueJS - 在 IOS 上选择输入双击错误【英文标题】:Element UI - VueJS - Select Input Double Tap bug on IOS 【发布时间】:2020-08-23 10:22:39 【问题描述】:我在 ios safari 或 chrome 上遇到了一个奇怪的问题,当我尝试从选择输入中选择一个选项时,当我触摸选择器时,它会在第一次点击时正确显示选项,但是当我尝试选择一个选项时,我必须点击两次才能使其工作,这是我的实际情况:
"element-ui": "^2.13.1", "vue": "^2.6.11"
这是我的选择输入:
<el-select class="select-danger"
placeholder="Language / Idioma"
v-model="locale">
<el-option v-for="option in selects.languages"
class="select-danger"
:value="option.value"
:label="option.label"
:key="option.label">
</el-option>
</el-select>
watch:
// watch for locale changes
locale: function (value)
alert("selected")
,
这个问题似乎只发生在 iOS 上,我在 android chrome 浏览器上测试过,并且运行良好。
有什么可能导致此问题的想法吗?
【问题讨论】:
【参考方案1】:环顾了一会后,我在 Element UI Github 问题中找到了一种解决方法,就在这里:
Element UI Github Issue
显然它与悬停状态有关,它在 iOS 上没有得到很好的管理,这是一个众所周知的问题,因为解决方案似乎将以下 SCSS 添加到 App.vue :
.el-scrollbar
> .el-scrollbar__bar
opacity: 1;
但不知何故,在我的情况下这不起作用,所以我只用 css 做到了:
/*Fixes double tap on iOS*/
.el-scrollbar__bar
opacity: 1!important;
就是这样,这解决了 Element UI 的双击问题。
希望这对其他人有所帮助。
【讨论】:
非常感谢!以上是关于Element UI - VueJS - 在 IOS 上选择输入双击错误的主要内容,如果未能解决你的问题,请参考以下文章
在 vueJS 2 中具有分页但无法呈现的 element-ui 表行的背景颜色
使用vuejs2.0和element-ui 搭建的一个后台管理界面