使用 scrollIntoView() 的 VueJS 组件

Question

我正在尝试在 vue 组件中使用 document.getElementById().scrollIntoView() 来使用 Jump-To-Div 类型的功能。

如果我在组件中调用该函数，该功能可以正常工作。但是，如果我尝试使用 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.Vue 子组件，它有一个 ref="solutionDetails"。我在父组件中使用子组件的引用调用此方法：

handleClick(command) { this.activeTab = 'Solution Details'; this.$refs.solutionDetails.showCurrent(command); },

子组件中有一个 showCurrent 函数，应该为参数 "command" 执行。这是子组件中的函数。

methods: { showCurrent(index) { document.getElementById(index).scrollIntoView(); },

如您所见，showCurrent 应该获取页面中的元素并且应该滚动到视图中。如果 SolutionDetails.vue 是活动选项卡，则相应的元素将完美地滚动到视图中。但是我正在从其他选项卡执行父函数，然后 this.activeTab = 'Solution Details'; 正在执行，即。活动选项卡正在更改为 SolutionDetails.vue 但请求的元素未滚动到视图中。

当其他选项卡是活动选项卡时，我应该如何滚动到某个元素？

Answer 1

问题是 scrollIntoView 在选项卡呈现在页面上之前 被调用，因为呈现是异步的。本质上，当你打电话给

this.activeTab = 'Solution Details';

Vue 不会立即呈现页面，它只是排队呈现。然而，在那之后你立即告诉 Vue 寻找渲染的元素并滚动到它。还没有。

我认为解决这个问题的第一步是使用 $nextTick。

this.$nextTick(() => this.$refs.solutionDetails.showCurrent(command))

在您尝试滚动到视图之前，应该等待需要发生的渲染。

Answer 2

实际上你必须引用组件中的元素。例如：

this.$refs.[ref name here].$el.scrollIntoView({ behavior: 'smooth' });

Answer 3

1：给你想要的元素一个ref名称。在父元素的函数里面，最好尝试console.log(this.$refs.[ref_name]) 看看哪个部分会起作用。它并不总是父元素。真的取决于你的 CSS 结构。当提交表单并收到错误消息时，视图转到您想要的部分。

if(this.errorMessage) {
    this.$refs.[ref_name].scrollIntoView();
}

2: 对于 Vue.JS 多步骤表单像注册这样的流程使用step是很正常的。我们现在所拥有的是视图将与第一步保持一致。例如，如果第一步的表单很长且需要滚动，那么转到第二步，视图将停留在底部。我们可以在这里做什么来保持视图在顶部：给顶部元素一个 ref 名称，如 ref="top"。在所有的步骤提交功能中，只需添加此即可使下一页保持在顶部：

this.$refs.top.scrollIntoView();

使用 scrollIntoView() 的 VueJS 组件

VueJS Components using scrollIntoView()

html

javascript

getelementbyid

vue.js

vue-component