Vue表單校驗失敗滾動到錯誤位置

表單校驗失敗之后都會有一個class屬性.is-error的類名,可以查找到目前第一個錯誤元素所對應的視圖區域,進行定位,驗證未通過的表單提示
scrollIntoView介紹https://docs.microsoft.com/zh-cn/office/vba/api/excel.window.scrollintoview

.main.js

Vue.prototype.$errorScroll = function errorScroll(callback){
  this.$nextTick(() => {
    this.loading = false;
    let isError = document.getElementsByClassName('is-error')
    this.$api.error(isError[0].innerText);
    isError[0].scrollIntoView({
        // 滾動到指定節點
        block: 'center',
        behavior: 'smooth',
    })
    if(callback){
      if(typeof callback !== 'function'){
        throw new TypeError(callback + 'is not a function');
      } else {
        callback();
      }
    }
  })
}

this.$refs['form'].validate((valid) => {
...
} else {
// 校驗失敗調用
this.$errorScroll(); // 調用掛載的方法
}