[Vue] Tworzenie skryptów

Question

W jaki sposób tworzyć skrypty w Vue.

Tzn. mam przygotowany skrypt do obsługi sticky headera:

import getCurrentScroll from '../../vendors/helpers/currentScroll.js';

export default class Header {

   constructor() {

     if (!this.setVars())
       return

     this.setEvents()

   }

   setVars() {
     this.element = document.querySelector('.header');
     this.scrollPosition = getCurrentScroll();

     if (!this.element)
       return

     this.classes = {
       notify  : 'header__notify--active',
       sticky  : 'header--sticky'
     }

     return true

   }

   setEvents() {

     document.addEventListener('click', (e) => { this.closeAll() })
     window.addEventListener('load',   () => { this.headerSticky() })
     window.addEventListener('scroll', () => { this.headerSticky() })

   }

   closeAll() {
     this.notifyWrapper.removeClass(this.classes.notify)
   }

   headerSticky() {
     this.scrollDirection = getCurrentScroll() - this.scrollPosition;

     if (this.scrollDirection <= 0) {
       this.element.addClass(this.classes.sticky);
     }
     else {
       this.element.removeClass(this.classes.sticky)
     }
     this.scrollPosition = getCurrentScroll();
   }
 }

Problem polega na tym, że skrypt nawet nie chwyta elementu '.header'. Wiem, że należałoby to wpiąć w hook 'mounted'. W jaki sposób poprawnie zaimplementować to w Vue?

Answer 1

Myślę że powinieneś zacząć od poczytania jak Vue działa. Dokumentacja posiada wiele praktycznych przykładów, dlatego odsyłam Cię właśnie do niej:

https://vuejs.org/v2/guide/

Na pewno znajdziesz rozwiązanie Swojego problemu ;)

Answer 2

Wiem, że należałoby to wpiąć w hook 'mounted'. W jaki sposób poprawnie zaimplementować to w Vue?

Zaimportować i podpiąć na mounted w komponencie headera. (Jeśli podpinałeś w przodkach headera, samego hedera  mogło jeszcze nie być)

---

1. dwa razy wywołujesz metodę setVars
2. window onload tam nie zadziała
3. do konstruktora możesz przekazać referencję, zamiast latać po DOM-ie i szukać .headera

---

Zachęcam do przepisania tego na Vue - wyjdzie Ci jakieś 5 linijek kodu, zamiast kombinowania z klasami

Comments

Jakby mogło to wyglądać w czystym Vue?

---

W data wrzucasz dwie zmienne: isSticky, isNotify

Na ich podstawie przydzielasz odpowiednie klasy w templatce

W mounted dodajesz listenery i w listenerach odpowiednio:

this.isSticky = scrollDirection <= 0

this.isNotify = false