頁面:

<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的值即可。