Vestavěné komponenty ​

import { h, Transition } from 'vue'

h(Transition, {
  /* props */
})

<Transition> ​

Poskytuje animované přechodové (transition) efekty pro jeden element nebo jednu komponentu.

• Props

  ts

  interface TransitionProps {
    /**
     * Slouží k automatickému generování názvů CSS tříd pro přechody.
     * Např. `name: 'fade'` se automaticky rozšíří na `.fade-enter`,
     * `.fade-enter-active`, atd.
     */
    name?: string
    /**
     * Určuje, zda se mají CSS třídy přechodů použít.
     * Výchozí hodnota: true
     */
    css?: boolean
    /**
     * Určuje typ událostí přechodů, na které se má čekat
     * pro určení času ukončení přechodu.
     * Výchozí chování je automatické detekování typu s delší dobou trvání.
     */
    type?: 'transition' | 'animation'
    /**
     * Určuje explicitní doby trvání přechodu.
     * Výchozí chování je čekání na první událost `transitionend`
     * nebo `animationend` na root elementu přechodu.
     */
    duration?: number | { enter: number; leave: number }
    /**
     * Ovládá časovou posloupnost přechodů při vstupu/výstupu.
     * Výchozí chování je současné provedení.
     */
    mode?: 'in-out' | 'out-in' | 'default'
    /**
     * Určuje, zda se má přechod aplikovat při počátečním vykreslení.
     * Výchozí hodnota: false
     */
    appear?: boolean
  
    /**
     * Vlastnosti pro přizpůsobení tříd přechodů.
     * V šablonách použijte kebab-case zápis, např. enter-from-class="xxx"
     */
    enterFromClass?: string
    enterActiveClass?: string
    enterToClass?: string
    appearFromClass?: string
    appearActiveClass?: string
    appearToClass?: string
    leaveFromClass?: string
    leaveActiveClass?: string
    leaveToClass?: string
  }

• Události

  • @before-enter
  • @before-leave
  • @enter
  • @leave
  • @appear
  • @after-enter
  • @after-leave
  • @after-appear
  • @enter-cancelled
  • @leave-cancelled (pouze pro v-show)
  • @appear-cancelled

• Příklad

  Jednoduchý element:

  template

  <Transition>
    <div v-if="ok">přepnutý obsah</div>
  </Transition>

  Vynucení přechodu změnou atributu key:

  template

  <Transition>
    <div :key="text">{{ text }}</div>
  </Transition>

  Dynamická komponenta s režimem přechodu + animace při zobrazení:

  template

  <Transition name="fade" mode="out-in" appear>
    <component :is="view"></component>
  </Transition>

  Naslouchání událostem přechodu:

  template

  <Transition @after-enter="onTransitionComplete">
    <div v-show="ok">přepnutý obsah</div>
  </Transition>

• Viz také: Průvodce - Transition

<TransitionGroup> ​

Poskytuje přechodové efekty pro více elementů nebo komponent v seznamu.

• Props

  <TransitionGroup> přijímá stejné props jako <Transition> s výjimkou mode, plus dvě další vlastnosti:

  ts

  interface TransitionGroupProps extends Omit<TransitionProps, 'mode'> {
    /**
     * Pokud není definováno, vykresluje se jako fragment.
     */
    tag?: string
    /**
     * Pro přizpůsobení CSS třídy použité během přechodových animací.
     * V šablonách použijte kebab-case zápis, např. move-class="xxx"
     */
    moveClass?: string
  }

• Události

  <TransitionGroup> emituje stejné události jako <Transition>.

• Podrobnosti

  Ve výchozím nastavení <TransitionGroup> nevykresluje obalový DOM element, ale lze jej definovat pomocí vlastnosti tag.

  Pamatujte, že každý potomek v <transition-group> musí být jednoznačně označen, aby animace fungovaly správně.

  <TransitionGroup> podporuje pohyblivé přechody pomocí CSS transformace. Pokud se pozice potomka na obrazovce po aktualizaci změní, bude mu aplikována pohybová CSS třída (automaticky generovaná z atributu name nebo konfigurovaná pomocí vlastnosti move-class). Pokud je CSS vlastnost transform při aplikaci pohybové třídy „transition-able“, element bude na své cílové místo plynule animován pomocí techniky FLIP.

• Příklad

  template

  <TransitionGroup tag="ul" name="slide">
    <li v-for="item in items" :key="item.id">
      {{ item.text }}
    </li>
  </TransitionGroup>

• Viz také: Průvodce - TransitionGroup

<KeepAlive> ​

Ukládá stav dynamicky přepínatelných komponent obalených uvnitř do cache.

• Props

  ts

  interface KeepAliveProps {
    /**
     * Pokud je specifikováno, budou do cache ukládány pouze komponenty
     * s názvy odpovídajícími `include`.
     */
    include?: MatchPattern
    /**
     * Jakákoli komponenta s názvem odpovídajícím `exclude` nebude 
     * ukládána do cache.
     */
    exclude?: MatchPattern
    /**
     * Maximální počet instancí komponenty, které se mají ukládat do cache.
     */
    max?: number | string
  }
  
  type MatchPattern = string | RegExp | (string | RegExp)[]

• Podrobnosti

  Když obaluje dynamickou komponentu, <KeepAlive> ukládá neaktivní instance komponent, aniž by je ničila.

  V <KeepAlive> může být v každém okamžiku pouze jedna aktivní instance komponenty jako přímý potomek.

  Když je komponenta uvnitř <KeepAlive> přepnuta, budou se volat odpovídající lifecycle hooky activated a deactivated poskytující alternativu k mounted a unmounted, které volány nejsou. To platí jak pro přímého potomka <KeepAlive>, tak pro všechny jeho potomky.

• Příklad

  Základní použití:

  template

  <KeepAlive>
    <component :is="view"></component>
  </KeepAlive>

  Při použití s větvemi v-if / v-else musí být vždy zobrazena pouze jedna komponenta:

  template

  <KeepAlive>
    <comp-a v-if="a > 1"></comp-a>
    <comp-b v-else></comp-b>
  </KeepAlive>

  Použití společně s <Transition>:

  template

  <Transition>
    <KeepAlive>
      <component :is="view"></component>
    </KeepAlive>
  </Transition>

  Použití include / exclude:

  template

  <!-- čárkami oddělený řetězec -->
  <KeepAlive include="a,b">
    <component :is="view"></component>
  </KeepAlive>
  
  <!-- regex (použijte `v-bind`) -->
  <KeepAlive :include="/a|b/">
    <component :is="view"></component>
  </KeepAlive>
  
  <!-- Pole (použijte `v-bind`) -->
  <KeepAlive :include="['a', 'b']">
    <component :is="view"></component>
  </KeepAlive>

  Použití s max:

  template

  <KeepAlive :max="10">
    <component :is="view"></component>
  </KeepAlive>

• Viz také: Průvodce - KeepAlive

<Teleport> ​

Vykresluje obsah svého slotu na jiné části DOM.

• Props

  ts

  interface TeleportProps {
    /**
     * Povinné. Určuje cílový kontejner.
     * Může být buď selektor nebo samotný element.
     */
    to: string | HTMLElement
    /**
     * Když je `true`, obsah zůstane na svém původním
     * místě místo přesunu do cílového kontejneru.
     * Lze měnit dynamicky.
     */
    disabled?: boolean
  }

• Příklad

  Určení cílového kontejneru:

  template

  <Teleport to="#some-id" />
  <Teleport to=".some-class" />
  <Teleport to="[data-teleport]" />

  Podmíněné vypnutí:

  template

  <Teleport to="#popup" :disabled="displayVideoInline">
    <video src="./my-movie.mp4">
  </Teleport>

• Viz také: Průvodce - Teleport

<Suspense> ​

Používá se pro orchestraci vnořených asynchronních závislostí ve stromu komponent.

• Props

  ts

  interface SuspenseProps {
    timeout?: string | number
  }

• Události

  • @resolve
  • @pending
  • @fallback

• Podrobnosti

  <Suspense> přijímá dva sloty: #default a #fallback. Zobrazí obsah fallback slotu, zatímco v paměti vykresluje default slot.

  Pokud narazí na asynchronní závislosti (Asynchronní komponenty a komponenty s async setup()) při vykreslování default slotu, počká, dokud nebudou všechny vyřešeny, než ho zobrazí.

• Viz také: Průvodce - Suspense