js原生类在vue中如何控制页面高度,获取回到底部及获取页面键盘焦点?
使用ref来创建并指定dom对象,使用
this.$refs.xxx.scrollIntoView();//让当前的元素滚动到浏览器窗口的可视区域内(xxx为指定的ref对象名称),
this.$refs.xxx.focus(); //把键盘焦点给予一个窗口, let curHeight = document.documentElement.scrollTop || document.body.scrollTop;
document.documentElement.scrollTop = curHeight - 60; document.body.scrollTop = curHeight - 60;//获取页面高度并将当前的页面高度减少60px;
dom是 DOM 定义了访问和操作 HTML 文档的标准方法,
vue的dom渲染是在mounted()之前进行完成的,因此,对于dom的操作需要在mounted()内完成;
setTimeout(() => { this.$refs.commentBox.scrollIntoView(); let curHeight = document.documentElement.scrollTop || document.body.scrollTop; document.documentElement.scrollTop = curHeight - 60; document.body.scrollTop = curHeight - 60; this.$refs.newComment.focus(); }, 500);
使用定时器,对dom操作进行执行。