Dashboard Temps Réel — V10 Mini-projet

⚠️ {{ alertMessage }}

Horloge temps réel

Score Live

Seuil : {{ threshold }}

{{ scoreTrend > 0 ? '▲' : '▼' }} {{ Math.abs(scoreTrend) }} pts

Uptime session

Depuis le montage du composant

Mises à jour

watchEffect déclenchements

🔬 Démo nextTick — Focus dynamique

Clique sur le bouton pour ajouter dynamiquement un champ et lui donner le focus via nextTick.

📋 Logs lifecycle / watchers

Aucun log

⚙️ Paramètres Dashboard (état conservé par KeepAlive)

Seuil d'alerte score : Valeur actuelle : {{ threshold }}

Intervalle update (ms) :

Nom du dashboard :

✅ Paramètres sauvegardés !

🔬 À propos de KeepAlive

Cette page Paramètres est enveloppée dans <keep-alive>. Modifie les champs ci-dessus, bascule vers l'onglet Dashboard, puis reviens ici. Tes modifications sont conservées !

Sans <keep-alive>, Vue détruirait ce composant à chaque changement de tab et les valeurs des inputs seraient réinitialisées.

          Compteur de vues de cet onglet : {{ settingsViewCount }}
        

🪄 Démo Teleport — Modal dans body

Ce conteneur a overflow:hidden. Sans Teleport, un modal position:fixed serait potentiellement piégé. Avec <Teleport to="body">, le modal est rendu directement dans <body>.

📦 Conteneur avec overflow:hidden

          <Teleport to="body">

            <div v-if="showModal" class="modal-overlay">

              /* Rendu dans document.body */

            </div>

          </Teleport>

🔬 Démo nextTick — Focus dynamique

⚙️ Paramètres Dashboard (état conservé par KeepAlive)

🔬 À propos de KeepAlive

🪄 Démo Teleport — Modal dans body

🪄 Modal Téléporté !