Element-plus el-select 在iOS移动端兼容问题，点击2次才能选择

Element-plus el-select 在iOS移动端兼容问题，点击2次才能选择

可滚动的el-select在iOS移动端，需要连续点击2次才能选中某项，在网上找了很多资料，基本都是更改如下样式，但实测并未解决问题，可能是element-plus在elementui基础上变动样式或代码所致

// 在app.vue 或 全局样式中设置如下样式
.el-scrollbar {
  .el-scrollbar__bar {
    opacity: 1 !important;
  }
}

经过一番尝试和查找问题后发现，el-select滚动条在iOS移动端第一次点击后会发生如下变化

<div class="el-scrollbar__bar is-vertical" style="display: none;"></div>
<div class="el-scrollbar__bar is-vertical" style=""></div>

所以有两个思路：
1、通过js让el-popper弹出后立即显示垂直滚动条，之后只需点击一次即可选中某项item；

<el-select @touchend="handleTestSelect">...</el-select>

const handleTestSelect = (event: TouchEvent) => {
	const selectListEl = document.body.querySelector('.el-popper.el-select__popper')
	const scrollbarEl = selectListEl?.querySelector('.el-scrollbar__bar.is-vertical') as HTMLElement
	if (scrollbarEl) {
		scrollbarEl.style.display = 'none'
		setTimeout(() => {
			scrollbarEl.style.display = 'block'
		}, 301)
	}
}

2、通过css强制显示垂直滚动条，达到和 1 一样的效果

.popper-scrollbar-show {
  .el-scrollbar {
    > .el-scrollbar__bar.is-vertical  {
      display: block !important;
      // opacity: 1 !important;
    }
  }
}
  
<el-select popper-class="popper-scrollbar-show">...</el-select>

备注：如果网页是响应式的，建议通过 navigator.userAgent 判断平台系统 或 @media 以及 popper-class=“xxx”，将改动限制在移动端。

文中如有错误或不当之处，还请指出，不胜感激。