解决 element中的组件在ios端的bug

if侠

已于 2023-09-21 13:19:39 修改

阅读量471

点赞数

文章标签： ios elementui

于 2023-06-30 17:34:29 首次发布

本文链接：https://blog.csdn.net/qq_51721168/article/details/131481324

版权

文章介绍了如何通过CSS解决在iOS设备上el-select组件需要点击两次才能选中的问题，以及处理input内容在页面返回后丢失的解决方案。同时，针对iOS设备的window.open跳转限制，提出了使用location.href替代的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

el-select在ios端，需要点击两次才可以选中内容

只需要加上两行css代码即可

//解决el-select在ios端需要点击两次才可以生效的问题
  .el-scrollbar {
    > .el-scrollbar__bar {
      opacity: 1;
    }
  }

input中的内容在跳转到一个新的链接后，返回原页面input的内容丢失

只需要在main.js中加上这段代码即可

let uaContains = function (key) {
  return navigator.userAgent.toLowerCase().indexOf(key.toLowerCase()) >= 0;
};

let IOS = ['(iPhone;', '(iPod touch;', '(iPad;', '(iPod;'].some(uaContains);
if (IOS) {
  let isPageHide = false;
  window.addEventListener('pageshow', function () {
    if (isPageHide) {
      window.location.reload();
    }
  });
  window.addEventListener('pagehide', function () {
    isPageHide = true;
  });
}

window.open在ios端无法跳转

是为ios的安全检测，无法打开新的页面进行跳转，所以要将window.open替换成location.href

let system = navigator.userAgent
let isAndroid = system.indexOf('Android') > -1 || system.indexOf('Adr') > -1 // android终端
let isiOS = !!system.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/) //ios终端

        if (isAndroid) {
            window.open(routeData.href, isNewPage);
        } else if (isiOS) {
            window.location.href = routeData.href
        }