javascript 使用scrollIntoView()的VueJS组件

b4wnujal 于 2023-08-02 发布在 Java

关注(0)|答案(4)|浏览(122)

我尝试在一个vue组件中使用document.getElementById（）.scrollIntoView（）来使用一种跳转到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”。我在父组件中**使用子组件的ref调用此方法：

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，但请求的元素不会滚动到视图中。
当其他选项卡是activeTab时，我应该怎么做才能滚动到一个元素？

JavaScript

来源：https://stackoverflow.com/questions/44607108/vuejs-components-using-scrollintoview

4条答案

按热度按时间

a9wyjsp71#

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

this.activeTab = 'Solution Details';

字符串
Vue不会立即呈现页面，它只是将一个呈现队列。然而，在此之后，您立即告诉Vue查找渲染的元素并滚动到它。它还没到那里。
我想我解决这个问题的第一个尝试是使用$nextTick。

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

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

赞(0）回复(0）举报 2023-08-02

bmp9r5qi2#

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

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

字符串

赞(0）回复(0）举报 2023-08-02

pengsaosao3#

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

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

字符串
2：对于Vue.JS多步骤表单使用步骤进行注册是正常的。我们现在所拥有的是视图将保持与第一步相同。例如，如果第一步的表单在滚动时很长，那么转到第二步，视图将停留在底部。我们可以做些什么来保持顶部的视图：为top元素指定一个ref名称，如ref=“top”。在提交函数的所有步骤中，只需添加以下内容以保持下一页位于顶部：

this.$refs.top.scrollIntoView();

型

赞(0）回复(0）举报 2023-08-02

liwlm1x94#

我的解决方案是把这个放在安装的钩子上：

setTimeout(() => {
      this.scrollTo();
    }, "100");

字符串
在方法中：

scrollTo() {
      this.$refs.target.scrollIntoView();
    },

型
1/10秒足以让组件加载，我的眼睛无法察觉。似乎是瞬间的。

赞(0）回复(0）举报 2023-08-02

我来回答

javascript 使用scrollIntoView()的VueJS组件

4条答案

相关问题

热门标签

最新问答