移动端手机软键盘遮挡输入框问题

页面:

<section class="links">
    <h3 class="title">联系方式</h3>
    <div class="content">
      <input autocomplete="autocomplete" type="text" name="link" placeholder="QQ、邮箱或手机等联系方式" v-model="userlink" @click.stop="linksInputEvent"/>
    </div>
  </section>

js:

linksInputEvent: function () {  //联系方式输入和聚焦事件,解决手机虚拟键盘遮挡输入框问题
                var self = this;
                var timer = setTimeout(function () {
                    var pannel = document.querySelector('.links .content input');
                    pannel.scrollIntoView(true);
                    pannel.scrollIntoViewIfNeeded();
                    clearTimeout(timer);
                    timer = null;
                }, 200);
            }

主要是三行代码：

var pannel = document.querySelector('.links .content input');
    pannel.scrollIntoView(true);
    pannel.scrollIntoViewIfNeeded();

获取输入框的dom对象以及添加这两个滚动事件
加入延时是因为软键盘出现需要时间。
另一种是通过输入框的focus和blur事件完成，当触发focus事件时，

input{
    position: fixed;
    top: 50px;
}

当触发blur事件时，改变或删除position和top的值即可。