关于iview中下拉框样式错乱问题，兼容移动端

在vue中使用iview的Select组件，当我在移动端苹果手机上使用时，拖动滑动页面，会导致Select组件位置错乱，体验非常差，这里记录下解决办法。

我们先看一下错乱图：
上图可以明显看到，Select的定位已经完全偏离父级，在安卓手机上也有同样的错误。
iview可能并不适合做响应式网页，但是问题出来了，就得解决，上述问题在pc端并未展示出来。
我们可以查看源码看下Select布局

上图蓝色部分，可以看到Select组件增加了行内样式fixed， 当我们在手机端滑动时，组件会实时计算高度，并重新赋值top属性，由于此处头部导航是用的fixed定位，所以就相当于fixed里面包裹了fixed。
根据官方文档介绍，可以加 transfer=“true” 属性处理此问题，但在手机端并不可靠，尤其是苹果手机。

接下来我们通过js重新添加class解决此问题。

如下图，我们在select组件上添加点击事件：

在methods中使用：

selectClick() {
      //设备选择下拉框，当是苹果端是会出现位置错乱，此处做处理
      //非移动端不做处理
      if (!/(iPhone|Android)/i.test(navigator.userAgent)) return;
      this.$nextTick(() => {
        //苹果系统使用absolute
        let select = document.querySelector(".ivu-select-dropdown");
        if (!/Android (\d+\.\d+)/.test(window.navigator.userAgent)) {
          select.classList.add("pos-absolute");
        }
      });
    }

处理办法是当点击select组件是动态添加一个position：absolute；属性的类，类的名字叫 ： pos-absolute

以上代码即在移动端的实践。
同样 iview的Poptip组件也有同样的问题，关键在于当在手机上滑动时，组件会实时计算并赋值top属性的值。苹果手机尽量少用fixed定位，由于此项目存在年限较久暂时只能通过此方法临时解决。
笔者此处用的为iview2版本。