Directives d’info-bulles personnalisées dans Vue.js 3

Les directives personnalisées dans Vue.js 3 sont l’une de ces choses où il n’y a pas de compatibilité avec la version précédente du framework.

En travaillant sur la nouvelle version du tableau de bord frontal de l’inspecteur, j’ai eu besoin d’afficher des info-bulles dans de nombreux points différents de l’application.

Avant d’entrer dans l’implémentation d’une directive d’info-bulle personnalisée dans Vue.js 3, permettez-moi de vous présenter les principes fondamentaux d’une bonne stratégie de réutilisation de code dans Vue.js.

Réutilisation de code dans Vue.js

Les formes les plus importantes pour la réutilisation du code dans Vue.js sont les composants et composable si vous écrivez des composants avec l’API de composition.

L’avantage d’utiliser des composants est que vous pouvez créer facilement des interfaces utilisateur complexes, en les décomposant en éléments plus petits et réutilisables. Cela facilite la maintenance de votre code et vous permet d’apporter progressivement des améliorations à l’interface utilisateur.

Vue.js fournit d’autres options pour la réutilisation du code, telles que les mixins, les directives et les plugins, qui peuvent encore améliorer la maintenabilité et la réutilisation de votre code. Les mixins sont des blocs de code réutilisables qui peuvent être ajoutés à un composant (ce n’est plus recommandé dans Vue.js 3), tandis que les directives sont utilisées pour ajouter un comportement personnalisé aux éléments HTML. Les plugins, en revanche, sont des packages qui peuvent être installés et utilisés sur plusieurs composants de votre application.

En tirant parti de ces fonctionnalités, vous pouvez créer des applications puissantes et évolutives, faciles à entretenir et à étendre.

Si vous souhaitez en savoir plus sur les stratégies utilisées pour créer notre plate-forme, consultez cet article sur la façon d’implémenter un bus d’événements dans Vue.js 3 : https://inspector.dev/why-and-how-to-create-an-event -bus-in-vuejs-3/

Directives personnalisées dans Vue.js 3

Comme mentionné dans la documentation :

Les directives personnalisées, en revanche, sont principalement destinées à réutiliser la logique qui implique un accès DOM de bas niveau sur des éléments simples.

Un outil parfait pour ajouter des fonctionnalités telles que « info-bulle », « popover » et d’autres composants Bootstrap aux éléments DOM.

Une directive dans Vue.js est essentiellement un objet avec les mêmes propriétés et crochets utilisés dans les composants. Mais dans ce cas, les crochets recevront l’instance de l’élément DOM auquel la directive est liée.

export default {
    mounted(el) {
        el.focus();
    }
}

Pour enregistrer la directive et la rendre disponible dans le modèle, vous devez transmettre l’objet directive à l’instance de l’application :

const app = createApp({})

import tooltip from "./Directives/tooltip";

// make v-tooltip usable in all components
app.directive('tooltip', tooltip);

Vous pouvez consulter tous les hooks de cycle de vie disponibles dans la documentation officielle.

Directive d’info-bulle personnalisée pour Vue.js 3

Pourquoi avons-nous besoin de créer une directive pour afficher les info-bulles ?

Comme mentionné dans la documentation Bootstrap 5, vous devez initialiser les info-bulles avec javascript pour les rendre visibles :

// HTML in your view
<a href="#" data-bs-toggle="tooltip" data-bs-title="Hello World!">Tooltip Example</a>


// Enable tooltip via Javascript 
const tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]');

const tooltipList = [...tooltipTriggerList].map(tooltipTriggerEl => new bootstrap.Tooltip(tooltipTriggerEl));

Mais ce code fonctionne dans une page HTML statique, où les éléments DOM sont disponibles le temps que le code javascript s’exécute pour activer toutes les info-bulles dans la vue.

Mais une application frontale réactive fonctionne dans le sens inverse. Les composants sont chargés dynamiquement avec l’interaction de l’utilisateur. Ainsi, chaque info-bulle incluse dans la vue après le premier démarrage de l’application ne sera pas activée et restera masquée.

Nous devons attacher dynamiquement des info-bulles aux éléments DOM au moment où l’élément est attaché à la vue.

Un cas d’utilisation parfait pour une directive personnalisée dans Vue.js.

import {Tooltip} from "bootstrap";

// Use "mounted" hook
export default {
    mounted(el, binding) {
        let tooltip = new Tooltip(el, {
            placement: binding.arg || 'top',
            title: binding.value
        });
    }
}

Enregistrez la directive dans l’instance de l’application pour la rendre disponible dans vos composants :

import tooltips from "./Directives/tooltips.js";
app.directive(tooltips);

Comment utiliser la directive d’info-bulle

Le code ci-dessus vous permet de définir dynamiquement le comportement de l’info-bulle.

Utilisation par défaut :

<a href="#" v-tooltip="Hello World!">Tooltip Example</a>

Si vous souhaitez modifier l’emplacement de l’info-bulle, vous pouvez la passer en argument :

<a href="#" v-tooltip:right="Hello World!">Tooltip Example</a>

Conclusion

J’espère que cet article pourra vous aider à concevoir vos produits logiciels de manière plus pratique. Cette implémentation peut être répliquée pour le popover et d’autres composants Bootstrap.