元素 UI - VueJS - Select IOS 上的输入双击错误

Question

我在 iOS Safari 或 chrome 上遇到一个奇怪的问题，当我尝试 select 来自 select 输入的选项时，当我触摸 select 或者，它在第一次点击时正确显示选项，但是当我尝试 select 一个选项时，我必须点击两次才能使其工作，这是我的实际情况：

"element-ui": "^2.13.1", "vue": "^2.6.11"

这是我的 select 输入：

                        <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 浏览器上测试过并且工作完美。

是否知道可能导致此问题的原因？

Answer 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 的双击问题。

希望这对其他人有帮助。

元素 UI - VueJS - Select IOS 上的输入双击错误

Element UI - VueJS - Select Input Double Tap bug on IOS

css

ios

vue.js

mobile-safari

element-ui