使用 scrollIntoView() 的 VueJS 组件答案

【问题标题】：VueJS Components using scrollIntoView()使用 scrollIntoView() 的 VueJS 组件
【发布时间】：2017-11-20 06:50:59
【问题描述】：

我正在尝试在 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>

所以有一个具有 ref="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 时，我应该如何滚动到某个元素？

【问题讨论】：

标签： javascript html vue.js getelementbyid vue-component

【解决方案1】：

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

this.activeTab = 'Solution Details';

Vue 不会立即渲染页面，它只是排队渲染。然而，紧接着你告诉 Vue 寻找渲染的元素并滚动到它。它还没有。

我想我解决这个问题的第一个尝试是使用$nextTick。

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

这应该等待需要发生的渲染，然后再尝试滚动到视图中。

【讨论】：

我完全忘记了异步的本质。我最近才开始使用这些。非常感谢！

【解决方案2】：

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

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

【讨论】：

请注意，如果将 ref 添加到常规 HTML 元素（与自定义 Vue 元素相反），则不应使用 $el。有关更多详细信息，请参阅此答案：stackoverflow.com/a/58393099/2884291

【解决方案3】：

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

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

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

this.$refs.top.scrollIntoView();

【讨论】：

请注意，如果ref在带有v-for的元素中，则会返回一个元素数组。