BjTour — Vue
Composant Vue 3 pour créer une visite guidée pas à pas de l'interface.
Utilisation
<script setup>
import { ref } from 'vue'
import { BjTour } from '@flrxnt/dsbj/vue'
const showTour = ref(false)
const steps = [
{ target: '#step-1', title: 'Bienvenue', content: 'Première étape.', placement: 'bottom' },
{ target: '#step-2', title: 'Suite', content: 'Deuxième étape.', placement: 'right' },
]
</script>
<template>
<BjTour v-model="showTour" :steps="steps">
<template #trigger="{ open }">
<button class="bj-btn" @click="open">Démarrer la visite</button>
</template>
</BjTour>
</template>Aperçu interactif
Étape 1Étape 2Étape 3
Props
| Classe | Description |
|---|---|
steps | Tableau d'objets { target, title, content, placement? } décrivant les étapes. |
modelValue | État ouvert/fermé du tour (v-model). |
Événements
| Classe | Description |
|---|---|
change | Émis au changement d'étape. Payload : { step: number, total: number }. |
start | Émis au démarrage de la visite. |
end | Émis à la fin de la visite. |
Slots
| Classe | Description |
|---|---|
trigger | Slot pour l'élément déclencheur. Prop : open (fonction). |
Accessibilité
Le popover possède
role="dialog". Le focus est piégé pendant la visite. Navigation au clavier : Flèche droite (suivant), Flèche gauche (précédent), Échap (fermer). Le focus est restauré après fermeture.