Pokazanie komponentu z opóźnieniem

0

Właśnie zastanawiam się jak to zrobić. Do pokazania komponentu używam:

<div v-if="showMe">
    <h1>Hello</h1>
</div>

Chciałbym aby po zmianie wartości z showMe = false na showMe = true, komponent pojawił się z opóźnieniem. np. 1000ms, a w tym czasie pojawi się komponent ""loading bar". Pomyślałem o tym, żeby ustawić po prostu jakiś timeout ale jeszcze w dokumentacji przeczytałem o asynchronicznych komponentach: https://vuejs.org/guide/components/async.html
Bardziej chciałbym to zrobić dla jakiś fajnych efektów.

Jeszcze na myśl mi przyszedł ten fragment kodu z React, który kiedyś napisałem:

const getAllContacts = async () => {
    setFetchingContactListData(true);
    const allContacts = await retrieveContacts();

    if (allContacts) {
      //Delay to make the effect of the loaded icon
      setTimeout(() => {
        setFetchingContactListData(false);
        setContacts(allContacts);
      }, 700);
    }
  };

  getAllContacts();
}, []);
1
Krwawy Ork napisał(a):

Właśnie zastanawiam się jak to zrobić. Do pokazania komponentu używam:

<div v-if="showMe">
    <h1>Hello</h1>
</div>

Chciałbym aby po zmianie wartości z showMe = false na showMe = true, komponent pojawił się z opóźnieniem. np. 1000ms, a w tym czasie pojawi się komponent ""loading bar". Pomyślałem o tym, żeby ustawić po prostu jakiś timeout ale jeszcze w dokumentacji przeczytałem o asynchronicznych komponentach: https://vuejs.org/guide/components/async.html

A po co chcesz go opóźniać?

Jeśli to ma być tylko wizualne opóźnienie to lepiej dodać transition w CSS. Natomaist jeśli to ma być faktycznie jakieś JSowe opóźnienie, to lepiej jakbyś napisał czemu ono ma służyć; może wtedy lepiej będzie dobrać rozwiązanie.

0

Np. potwierdzam zamówienie kupna czegoś i pojawia się komponent z napisem "Trwa wysyłanie zamówienia na magazyn..." z jakimś obrazkiem samochodu, i np. 500ms znika.

0
Krwawy Ork napisał(a):

Np. potwierdzam zamówienie kupna czegoś i pojawia się komponent z napisem "Trwa wysyłanie zamówienia na magazyn..." z jakimś obrazkiem samochodu, i np. 500ms znika.

A on nie powinien tyle trwać, ile trwa faktyczne trwa jakiś request któy wysyłasz?

No ale rozumiem że to ma być taki "udawany" napis "Trwa wysyłanie...".

No to ja bym Ci chyba poradził to w CSS pokazać i opóźnić, bo jeśli to ma tylko wyglądać, a nic nie robić, to bez sensu do tego używa JS. Zobacz sobie:

1 użytkowników online, w tym zalogowanych: 0, gości: 1