h5页面使用vue+element ui开发遇到的问题

一、使用element-ui开移动端时遇到的问题

1）、在安卓手机element-ui下拉框点击时会有背景阴影,但在ios手机不会

解决方案:设置输入框样式：-webkit-tap-highlight-color: transparent !important;

2)、element-ui下拉框在ios上点两次才能选中

解决方案:

.el-scrollbar {
//element-ui 下拉框在ios上 点击两次才能选中
    > .el-scrollbar__bar {
        opacity: 1 !important;
    }
}

3）、element-ui 的下拉框设置了clearable后在ios上需点击两次才能出来下拉选择框，去掉clearable属性

温馨提示：element-ui是用于pc端的ui框架，尽量不在开发移动端的项目中使用，开发移动端项目的时候如果需要使用第三方ui框架可以使用vant的ui框架

二、在ios端手机聚焦时光标很大：

解决方案：a、高度height和行高line-height内容用padding撑开

                  b、line-height设置小一点

三、ios键盘唤起，键盘收起以后页面不归位

解决方案：在输入框失去焦点的时候给一个事件： 

@blur.prevent='changeBlur()'
changeBlur(){
      let u = navigator.userAgent, app = navigator.appVersion;
      let isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);
      if(isIOS){
        setTimeout(() => {
          const scrollHeight = document.documentElement.scrollTop || document.body.scrollTop || 0
          window.scrollTo(0, Math.max(scrollHeight - 1, 0))
          }, 200)
      }
    } 

四、安卓弹出的键盘覆盖文本框：

解决方法：给input和textarea标签添加focus事件

@focus='changefocus()'
changefocus(){
  let u = navigator.userAgent, app = navigator.appVersion;
  let isAndroid = u.indexOf('Android') > -1 || u.indexOf('Linux') > -1;
  if(isAndroid){
    setTimeout(function() {
     document.activeElement.scrollIntoViewIfNeeded();//用来将不在浏览器窗口的可见区域内的元素滚动到浏览器窗口的可见区域。但如果该元素已经在浏览器窗口的可见区域内，则不会发生滚动
     document.activeElement.scrollIntoView();  //让当前的元素滚动到浏览器窗口的可视区域内
    }, 500);       
  }
}, 

五、在开发微信分享至自定义分享内容时要注意用测试号测试的时候需要先关注接口测试的公众号，不然分享的时候自定义的内容不生效。（仅测试号需要关注）