VueJS组件使用scrollIntoView()
问题描述:
我试图在vue组件中使用使用document.getElementById()。scrollIntoView()的Jump-To-Div类功能。VueJS组件使用scrollIntoView()
如果我在组件中调用该函数,该功能可以正常工作。但是,如果我尝试使用ref从父组件调用该函数,则该元素不会滚动到视图中。
父组件是一个页面,子组件是页面中的标签。
这是在父组件孩子Vue的组件: -
<el-tab-pane label="Solution Details" name="Solution Details" v-loading="loading">
<solution-details
:formData="response"
ref="solutionDetails"
@done="$emit('done')">
</solution-details>
</el-tab-pane>
因此,有具有参考= “solutionDetails” 一SolutionDetails.Vue子组件。 我在父组件使用ref的子组件调用此方法:
handleClick(command) {
this.activeTab = 'Solution Details';
this.$refs.solutionDetails.showCurrent(command);
},
有其应当为参数“命令”得到执行的子组件的showCurrent功能。这是子部件中的功能。
methods: {
showCurrent(index) {
document.getElementById(index).scrollIntoView();
},
正如你所看到的,showCurrent应该得到的元素在页面,并应滚动到视图。如果SolutionDetails.vue是活动选项卡,那么相应的元素将被完全滚动到视图中。但我正在执行其他选项卡的父功能,然后执行this.activeTab = 'Solution Details';
,即。活动选项卡将更改为SolutionDetails.vue,但所请求的元素不滚动到视图中。
当某个其他选项卡是activeTab时,应该如何滚动到某个元素?
答
问题是scrollIntoView
在之前被称为该选项卡在页面上呈现,因为呈现是异步的。从本质上讲,当你调用
this.activeTab = 'Solution Details';
Vue公司不立即渲染页面,它只是一个排队渲染。然而,紧接着你告诉Vue寻找渲染的元素并滚动到它。它还没有。
我觉得我的第一个刺解决这个问题的方法是使用$nextTick。
this,$nextTick(() => this.$refs.solutionDetails.showCurrent(command))
这应该等待在您尝试滚动到视图之前需要发生的呈现。
我完全忘记了异步性。我最近才开始与这些工作。非常感谢你! – benedemon