vue3 表单校验时报错滚动条自动定位到报错信息的位置

Vue3 中的表单校验通常会利用 `v-model` 和 `v-bind:class` 或者自定义的验证组件来实现。当某个字段的验证失败时，一些库如 VeeValidate 或 Element UI 的表单验证功能会在该字段元素上添加特殊的 CSS 类名，显示错误提示，并且可能会触发浏览器的行为，使其自动滚动到错误信息所在的节点。

如果你遇到滚动条自动定位到错误信息的问题，这可能是由于浏览器的默认行为或者是你使用的验证库设置的结果。为了解决这个问题，你可以尝试以下几种方法：

1. **禁用滚动**：在验证错误发生时，手动阻止页面的滚动。例如，可以创建一个全局事件监听器，在接收到验证错误时暂时取消滚动行为，然后在用户处理完错误后恢复。

document.addEventListener('DOMContentLoaded', function () {
  document.body.addEventListener('scroll', function (event) {
    if (/* 判断当前是否是错误聚焦状态 */) {
      event.preventDefault();
    }
  });
});

2. **配置验证库**：查看 VeeValidate 或你所使用的库的文档，看看是否有提供配置选项去控制滚动行为。很多库允许你配置错误提示的展示方式和行为。

3. **自定义提示样式**：通过 CSS 控制错误提示的显示位置，避免默认的滚动行为影响用户体验。比如将错误消息固定在输入框上方或者下方，而不是动态滚动到元素本身。

4. **手动滚动**：在显示错误提示后，你可以选择性地滚动到错误信息，而不是完全交给浏览器自动完成。

记得检查你的项目配置以及验证库的文档，找到最合适的解决方案。