elselect iphone上 要点两次

**element-ui的el-select组件在iOS设备上需要点击两次才能选中选项的问题，主要是由于iOS系统的触摸事件处理机制导致的。**‌

问题原因

在iOS设备上，触摸事件处理机制会首先触发一个touchstart事件来检测用户是否在点击链接或输入框，如果是，则会取消接下来的click事件。由于element-ui的el-select组件是基于click事件的，这会导致需要点击两次才能选中选项‌1。

解决方案

1. ‌修改全局样式 ‌：

   在全局样式中添加CSS代码，设置.el-scrollbar__bar的opacity为1，确保滚动条始终可见，从而一次点击即可选中选项。具体代码如下：

   .el-scrollbar__bar {
       opacity: 1 !important;
   }

2. 将这段样式放在index.html中，因为el-select下拉框是和id="app"平级的，放在app.vue里以及公共样式里可能不生效‌23。

3. ‌监听touchstart事件 ‌：

   通过监听touchstart事件，在用户点击Select组件时记录下触发的位置和时间，然后在接下来的click事件中判断是否需要进行额外的处理来避免iOS的特性。具体实现方式可以参考以下代码示例：

   mounted() {
       this.$refs.select.addEventListener('touchstart', this.handleTouchStart);
   },
   methods: {
       handleTouchStart(e) {
           this.$refs.select.addEventListener('click', this.handleClick);
       },
       handleClick() {
           // 处理点击事件
       }
   }

   这种方法通过监听touchstart和click事件，可以有效地解决需要点击两次才能选中选项的问题‌。