场景需求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实现的很好
如果对大家有帮助的话,麻烦大家点点赞,你的支持就是我创作的动力,谢谢