优化项目表单代码时，突然想起以前原型设计提出过一个需求，但是当时没有空研究，需求是这样的：希望表单校验错误信息出现时滚动到对应 form-item 项。我之前好像见过类似功能，废话不多说，分享下我的思路。
- 由于项目是用的 vue2，以下展示代码均以 vue2 为基础。
- 首先想到的就是从 validate 方法下手，看看 validate 方法有没有能够帮助我实现获取错误项 dom。相关文档 element.eleme.cn/#/zh-CN/com…
- 可以看见 callback 中除了经常用的 valid 形参外还有另一个参数，打印出来后发现是错误项的规则 rules。
- 触发validate
- 打印/查看 obj
- rules 展示
- 因此可以利用该对象来知道是哪个 form 参数出了错误。知道这个就很好办了，可以利用各种方法来实现滚动到对应 form-item，我这里的想法是利用对象的第一个 key，来对应我在 form-item 上提前写好的 ref 来获取 dom。
- ref 布置
- 获取对应 ref 并滚动到视口
- 这里最重要的就是 scrollIntoView 方法，我最开始是打算用 scrollTo 一类的方法的，但是会麻烦一点，这个方法不用传数值，直接可以将 dom 滚动到视口位置，非常方便，并且大多浏览器都是支持的。参考文档 developer.mozilla.org/zh-CN/docs/…
最后补充一点，如果单纯用 scrollIntoView 方法是没有动画效果的，滚动动画需要在滚动盒子的 css 加上 scroll-behavior: smooth; 属性。参考文档 developer.mozilla.org/zh-CN/docs/…
- 最后效果
