ant-design-vue formModal 表单validate error 提示并滚动到错误位置

ant-design-vue ： 1.7.8

this.$refs.form.validate((valid, rules) => {
  if (valid){
    // 验证通过
  } else {
    // 验证不通过
    // 方式1：通过 rules 获取到验证不通过的规则，并给出提示
    for(var ruleName in rules) {
      let _rule = rules[ruleName]
      let message = _rule[0].message
      this.$message.warning(message, 1)
      break
    }
    // 方式2：引入下面的 formModalWarnAndScroll 方法
    formModalWarnAndScroll(this.$refs.form)
  }
})

// utils.js

import Vue from 'vue'

// 元素是否在窗口可见
export function isElementInViewport (el) {
  var rect = el.getBoundingClientRect();
  return (
    rect.top >= 0 &&
    rect.left >= 0 &&
    rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
    rect.right <= (window.innerWidth || document.documentElement.clientWidth)
  );
}

/**
 * formModal 表单提示和自动滚动到指定位置
 * @param {*} $form this.$refs.form
 */
export function formModalWarnAndScroll ($form) {
  let $fields = $form.fields
  let $errorItem = $fields.find(item=> {
    // field 状态为 error 并且元素未 display:none
    return item.validateState == 'error' && item.$el.checkVisibility()
  })
  if ($errorItem){
    // 提示
    let message = $errorItem.validateMessage
    // 注意：如果当前函数在 utils.js中， 此处需要引入 Vue
    Vue.prototype.$message.warning(message, 1)
    // 自动滚动
    let $el = $errorItem.$el
    // 窗口不可见
    if (!isElementInViewport($el)) {
      $el.scrollIntoView({ behavior: "smooth" })
    }
  }
}