使用scrollIntoView这个API来完成元素滚动到可视区域

场景需求1

表        单页面出现错误时，需要立即定位到错误的位置上，以便用户查看，比如这个表单过长，有滚动条的时候，这样子用户体验会很好

实现

        这里表单会比较复杂，不是引入组件的form-item的ref需要跟表单的rules字段名一致，而封装的组件的话只需要一个标识字段和ref就行

这里是vue3代码,其他的代码就不一一列举

 const validForm = (ref) => {
  return new Promise((resolve, reject) => {
    ref.value.validate((success, validResult) => {
      if (success) {
        resolve(true)
        return
      }
      // 关键步骤 这个通用的处理表单校验的方法中，会将校验错误的结果字段发送出去
      reject(Object.keys(validResult))
    })
  })
}

 const validate = async () => {
    let formValid = false
    let formInvalidResult = []
    let oneValid = true
    let twoValid = true

    // 其他校验.....
    try {
       formValid = await validForm(formRef)
    } catch (error) {
       formInvalidResult = error
    }

    // oneValidRef是封装组件的ref，validate是该组件的校验方法
    oneValid = await oneValidRef.value.validate()

    twoValid = await twoValidRef.value.validate()

    // 其他校验.....

     const valid = formValid && oneValid && twoValid
    if(formInvalidResult.length) {
        refs[formInvalidResult[0]]?.$el?.scrollIntoView()
    }else if(!oneValid) {
        twoValidRef.value.$el.scrollIntoView()
    }else if(!twoValid) {
        twoValidRef.value.$el.scrollIntoView()
    }

    return valid
 }

场景需求2

在vue2使用element-ui封装选择树状下来组件的时候需要在组件有值的时候，再打开下拉弹窗，如果内容过长需要能够定位到那个元素上，这个时候可以使用scrollIntoView来实现

这其实是封装时可能会用el-select+el-tree来进行封装，但是这个组合会出现以下问题：滚动的元素定位有问题

所以后面考虑使用el-popover+el-input+el-tree来实现,具体代码参考element-ui封装选择树状下拉组件-CSDN博客，附上一张效果图，不过到vue3就不需要烦恼这种组件了，element-plus实现的很好

如果对大家有帮助的话，麻烦大家点点赞，你的支持就是我创作的动力，谢谢