页面数据回填后会在底部,我遇到的有两种情况
1.路由问题
scrollBehavior(to, from, savedPosition) {
if (savedPosition) {
return savedPosition
} else {
return { x: 0, y: 0 }
}
}
在路由中添加,跳转路由后页面会在顶部开始显示,可以解决一部分问题
具体位置
new Router({
// mode: 'history', // require service support
scrollBehavior(to, from, savedPosition) {
if (savedPosition) {
return savedPosition
} else {
return { x: 0, y: 0 }
}
},
routes: [...constantRoutes, ...privateRoutes]
// ,
})
2. 页面内容获得了焦点导致
在vue页面渲染中,我使用了富文本编辑器,导致页面一开始显示在顶部,但会跳到页面获得焦点的地方
解决办法 : 在获得数据回填后失去焦点
// 富文本编辑器自动获取焦点处理
this.$nextTick(function () {
this.$refs.myQuillEditor.quill.enable(true)
this.$refs.myQuillEditor.quill.blur()
// 失去焦点后回到页面顶部
window.scrollTo(0, 0)
})
例如1:
async editShowDialogFN(data) {
try {
// 发起请求
const res = await articleDetailAPI(data)
// 请求成功后数据回填
this.formDialog = res.data
// 富文本编辑器自动获取焦点处理
this.$nextTick(function() {
this.$refs.myQuillEditor.quill.enable(true)
this.$refs.myQuillEditor.quill.blur()
})
} catch (error) {
console.error(error)
}
}
例如2:
// 文本改变后同步回父组件绑定的值
onEditorChange(event) {
// console.log(event.html)
this.$emit('update:value', event.html)
this.$emit('input', event.html)
// 富文本编辑器自动获取焦点处理
this.$nextTick(function () {
this.$refs.myQuillEditor.quill.enable(true)
this.$refs.myQuillEditor.quill.blur()
window.scrollTo(0, 0)
})
}