el-select 在 ipone手机上的一些问题

标题项目背景

vue2.5.2 + "element-ui": "^2.13.1", 企业微信内嵌h5页面

问题一: el-select 在iphone手机上点击两次才触发

解救方案 在App.vue 文件中全局配置下下列代码 👇

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

问题二: el-select在移动端/ipad上搜索功能不能弹出软键盘进行输入的问题

解决方案：去除下拉框的 readonly 属性即可, 不多bb, 代码 思路: 在点击 el-select 前去掉 readonly, 由于选中 option 之后 readonly 会重新生成, 所以在 blur, focus 也要做处理 👇

<van-field label="业务主管：" required readonly>
 <el-select
    id="select-click-bus"
    v-model="businessName"
    placeholder="请选择"
    filterable
    slot="button"
    @change="onChoseBusiness(businessName)"
    @visible-change="removeReadOnly('select-click-bus')"
    @blur="removeReadOnly('select-click-bus')"
    @focus="removeReadOnly('select-click-bus')"
  >
    <el-option label="" value="" />
    <el-option
      v-for="(item, index) in choseBusinessList"
      :key="index"
      :label="item.value"
      :value="item.value"
    />
  </el-select>
</van-field>

在 mounted 阶段先处理, 便于第一次点击时可以弹出 ios 软键盘 👇

mounted() {
document.getElementById("select-click-bus").removeAttribute("readOnly");
}

methods 里的方法 👇

removeReadOnly(className) {
 document.getElementById(className).removeAttribute("readOnly");
},

罪魁元首 👇

结束: 完事, 欢迎大佬提供更好的方案 遥遥领先