分享踩坑点

大多数人都会遇到的几个兼容性坑

1、ios端微信h5页面上下滑动时卡顿、页面缺失+ios键盘唤起，键盘收起以后页面不归位

 onBlur(){
      / / 判断是ios
      if (this.$utils.isKyAppIos()) {
        var currentPosition,timer;
        var speed=1;
        timer = setInterval(function(){
          currentPosition = document.documentElement.scrollTop || document.body.scrollTop;
          currentPosition -= speed;
          window.scrollTo(0,currentPosition);//页面向上滚动
          currentPosition += speed;
          window.scrollTo(0,currentPosition);//页面向下滚动
          clearInterval(timer);
        },100);
        // window.scrollTo(0,0);
      }
    }

安卓弹出的键盘遮盖文本框

image.png

解决办法：给input和textarea标签添加focus事件，如下，先判断是不是安卓手机下的操作，当然，可以不用判断机型，Document 对象属性和方法，setTimeout延时0.5秒，因为调用安卓键盘有一点迟钝，导致如果不延时处理的话，滚动就失效了

Element.scrollIntoViewIfNeeded()方法用来将不在浏览器窗口的可见区域内的元素滚动到浏览器窗口的可见区域。 如果该元素已经在浏览器窗口的可见区域内，则不会发生滚动。 此方法是标准的

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);       
  }
}, 

全局处理

    window.addEventListener('resize', function() {
            if(
                document.activeElement.tagName === 'INPUT' ||
                document.activeElement.tagName === 'TEXTAREA'
            ) {
                window.setTimeout(function() {
                    if('scrollIntoView' in document.activeElement) {
                        document.activeElement.scrollIntoView();
                    } else {
                        document.activeElement.scrollIntoViewIfNeeded();
                    }
                }, 0);
            }
        });

ElementUI 问题清单

1、form 下面只有一个 input 时回车键刷新页面

原因是触发了表单默认的提交行为，给el-form 加上@submit.native.prevent就行了。

<el-form inline @submit.native.prevent>
  <el-form-item label="订单号">
    <el-input
      v-model="query.orderNo"
      :placeholder="输入订单号查询"
      clearable
      @keyup.enter.native="enterInput"
    />
  </el-form-item>
</el-form>

2、表格固定列最后一行显示不全

image.png

这种情况有时在宽度刚好处于临界值状态时会出现。因为固定列是独立于表格body动态计算高度的，出现了固定列高度小于表格高度所以造成最后一行被遮挡。

// 设置全局
.el-table__fixed-right {
  height: 100% !important;
}

3、输入框用正则限制但绑定值未更新

<el-input 
  v-model="form.retailMinOrder" 
  placeholder="请输入" 
  onkeyup="value=value.replace(/[^\d.]/g,'')" 
/>

这样做虽然输入框的显示是正确的，但绑定的值是没有更新的，将 onkeyup 改为 oninput 即可。

·PS：经评论区的兄弟指正，输入中文后 v-model 会失效，下面的方式更好一点：

<el-input 
  v-model="form.retailMinOrder" 
  placeholder="请输入" 
  @keyup.native="form.retailMinOrder=form.retailMinOrder.replace(/[^\d.]/g,'')"
/>

下面是好玩的拖拽演示