如何在函数参数中 define/use "el" (vue js)

Question

我是VueJS初学者，还请多多包涵

我需要编写代码以在使用“？”时滚动到 id 元素在 URL。效果与

相同

但我已经按照固定格式跟踪问题，因为这是我的作业。他们在没有 document.getElementById(Query.query).scrollIntoView({behavior: "smooth" }); 的情况下提供了这两个功能。我通过添加上面的代码完成了结果。但我不知道如何分成 2 个函数。而且我也不知道如何使用“el”参数调用 scrollToHere()。

scrollToHere() 没有在其他地方调用，所以我必须在 anchor() 中包含这个函数，但我不知道如何。这个“el”是做什么用的？我如何分离代码？任何指导将不胜感激。

<div id="scroll_here"></div>

methods: {
    anchor() {
        console.log(Query)  //query: "scroll_here"            
        document.getElementById(Query.query).scrollIntoView({behavior: "smooth" });  
    },
    scrollToHere (el) {
         // CODE HERE
    },
}

Answer 1

中的项目 el 指的是您要滚动到的 HTMLElement。

这是一个二二过程。首先找到元素，然后滚动到它。

// Assuming this is the html - <div id="scroll_here"></div>

// 1. Find the element using one of the two ways
const el = document.getElementById('scroll_here');

// or alternately,
const el = document.querySelector('#scroll_here');


// 2. Scroll that element into view.
el.scrollIntoView();

您可以使用 getElementById 或 querySelector 获取 DOM 树中 HTML 元素的引用。

在您的情况下，您可以在 anchor() 方法中获取元素引用并将其传递给 scrollToHere() 函数，例如：

methods: {
  anchor() {
    // { query: "scroll_here" }
    console.log(Query);
    
    this.scrollToHere(document.getElementById(Query.query));
  },
  scrollToHere(el) {
    el.scrollIntoView({behavior: "smooth" });
  }
}

如何在函数参数中 define/use "el" (vue js)

How to define/use "el" in function parameter (vue js)

javascript

vue.js

js-scrollintoview

vuejs3