Как сделать универсальный селектор?

Question

[account-6]

Есть код такого вида (метод Vue):

handleScroll() {
      let obj = document.querySelector('h2');
      let {top,bottom} = obj.getBoundingClientRect();
      let height = document.documentElement.clientHeight;
      this.scrolled = top < height && bottom >0;
}

Проблема в том, что если я хочу таких элементов, скажем, 5 на странице, то мне приходится заново повторять одно и то же, меняя лишь один селектор (элемент, тэг, айди).

Как рефакторить это, чтобы этот код применялся к любым элементам которые я уже выберу благодаря Vue?

Надо что-то по смыслу типо

let obj = document.querySelector('любой элемент которому задам этот метод');

Answer 1

[Evgeny Kulakov]

Как вариант создать отдельный vue компонент.

Или просто анимировать все элементы, удовлетворяющие условию:

handleScroll() {
      let objList = document.querySelectorAll('h2');
      objList.forEach(function(el) {
        let {top,bottom} = el.getBoundingClientRect();
        let height = document.documentElement.clientHeight;
        if(top < height && bottom > 0) {
          el.classList.add('bounceInLeft');
        } else {
          el.classList.remove('bounceInLeft');
        }
      });
  }

Comments

[account-6]

1. Компонент? А что там будет? Не понятно. Я же не импортирую никакой UI, а только метод. Может быть использовать плагины (у меня Nuxt) или middleware для импорта метода? Но опять же тогда не понятно что в нем писать, как сделать универсальный селектор?

2. В вашем примере опять же h2. let objList = document.querySelectorAll('h2'); А если мне надо div, img и тд?

[Evgeny Kulakov]

1. Создаете компонент-обертку с шаблоном типа: <div></div>, в нем подписываетесь на событие scrool... вообщем делаете все, что было сделано. Далее в основном коде <some-component><h2>Hello</h2></some-component>.

2. Это просто пример, вы можете для элементов, которые нужно анимировать задавать определенный класс, например, '.my-animation' и указать его вместо 'h2' в селекторе.

[Evgeny Kulakov]

Держите: codepen.io/kerf/pen/rmNgay

[account-6]

Evgeny Kulakov: Куда высылать пиво?))

[Evgeny Kulakov]

Лучше коньяк, пиво не доедет))