话不多说直接上代码。
save() {
this.$refs['form'].validate(async (valid, object) => {
// 这边可以接受两个参数,valid是是否校验成功的布尔值,object是没有校验通过的表单项,是一个对象。
if (valid) {
console.log('校验成功'); // vaild为true时校验成功
} else {
console.log('校验失败'); // 否则校验失败
this.scrollView(object) // 失败后将奖项不成功的表单项传递过去
return false
}
})
},
scrollView(object) {
const key = Object.keys(object) // key得到的是表单绑定的值
let dom = this.$refs[key[0]] // dom是第一项没有通过的值,需要注意的是vue中获取dom元素用的是ref,所以必须在含有表单校验规则的项上绑定ref,与v-model值相同。
dom.$el.scrollIntoView({ // 该scrollIntoView()方法将调用它的元素滚动到浏览器窗口的可见区域。
block: 'center',
behavior: 'smooth',
})
},
感觉有用请三连击。