vue element 表單驗證不通過，滾動到固對應位置

我們在使用elementIUI實現表單驗證，內容比較多的時候，提示內容會被遮擋，這時候用戶不清楚什么情況，還會連續點擊提交按鈕。這個時候需求來啦：我們需要在表單驗證不通過的時候，頁面滾動到對應的位置。

 

了解來需求，那我們來看看如何實現？其實比較簡單，下面說一下大致思路：

• 在表單驗證方法validate中，提供了兩個參數：是否校驗成功，和未通過校驗的字段規則。
• 在需要驗證的位置加上ref，需要注意，這里的ref需要和prop的值一致

 

不多說了，直接上代碼：

驗證表單不通過，會調用 scrollToView 方法，該方法作用就是滾動到對應位置 

 

/**
 * element 表單多個驗證不通過，滾動到驗證提示的位置
 * { String } object 驗證規則
 * 備注：
 *     1.this.$refs.infoList.validate((_, object)=>{})   返回兩個參數，第一個參數：驗證是否成功，第二個參數：驗證規則
 *     2.驗證的標簽上添加ref屬性，名字和prop值一致。例：<el-form-item :prop="'infoData.' + scope.$index + '.coalName'" :ref="'infoData.' + scope.$index + '.coalName'" ></el-form-item>
 */
export function scrollToView(_this, object) {
  for (let i in object) {
    let dom = _this.$refs[i];
    if (Object.prototype.toString.call(dom) !== "[object Object]") {
      //這里是針對遍歷的情況（多個輸入框），取值為數組
      dom = dom[0];
    } 
    //第一種方法（包含動畫效果）
    dom.$el.scrollIntoView({
      //滾動到指定節點
      block: "center", //值有start,center,end，nearest，當前顯示在視圖區域中間
      behavior: "smooth", //值有auto、instant,smooth，緩動動畫（當前是慢速的）
    });

    //第二種方法
    // let top = dom.$el.getBoundingClientRect().top; //獲取當前節點的偏移值
    // console.log(top,'top');
    // let scrollTop = document.documentElement.scrollTop; //獲取視圖滾動值
    // let diff = top + scrollTop;
    // document.documentElement.scrollTop = diff - 276; //276是第一個輸入框節點距離頂部的偏移值，也可以在初始化提前保存
    //window.scrollTo(0,diff- 276) //同上
    break; //因為我們只需要檢測一項,所以就可以跳出循環了
  }
}