Menu contextuel personnalisé VueJs

Avr 29, 2020 VueJs
menu contextuel
Partagez
menu contextuel vuejs

Vous avez souvent du voir des menus contextuels personnalisés qui apparaissent lorsque vous faites un clic droit par exemple dans vos messageries web.

Le clic droit √©tant ex√©cut√© c√īt√© client, il faut du code client pour modifier le comportement de ce clic, donc du javascript donc VueJs peut lui aussi g√©rer l’affichage d’un menu contextuel personnalis√©.

Apr√®s quelques recherches et tests, le plus simple pour g√©rer cela, c’est d’utiliser une librairie VueJs : vue-simple-context-menu me semble la librairie la plus simple √† utiliser et elle fait tr√®s bien le job. Voici comment cela fonctionne

Installation

Si vous avez suivi mon tuto sur l’environnement de d√©veloppement (formation gratuite propos√©e ci-dessous), vous aurez vu que je conseille souvent d’utiliser les packages NPM s’ils sont disponibles. C’est le cas pour cette librairie. Du coup, simple commande dans la console POWERSHELL pour installer le package :

npm install vue-simple-context-menu

Maintenant que vous avez install√© le package, il vous reste √† demander √† Vue de l’ajouter dans les composants √† utiliser. Pour se faire, allez dans votre fichier App.js et ajouter ceci:

import VueSimpleContextMenu from 'vue-simple-context-menu'
import 'vue-simple-context-menu/dist/vue-simple-context-menu.css'
...
Vue.component('vue-simple-context-menu', VueSimpleContextMenu)
...

Vous pouvez voir 3 choses :

  • On importe notre composant depuis le package pour pouvoir l’utiliser dans VueJs : √ßa c’est comme d’habitude.
  • Par contre, on importe √©galement le CSS depuis le package car on en a besoin pour que le menu contextuel s’affiche sous forme d’un menu. Sans cela, votre menu va s’afficher sans m√™me avoir fait de clic droit et en plus il va s’afficher √† la suite de votre page html directement.
  • Enfin, on utilise le composant sous le nom “vue-simple-context-menu”. C’est ce nom qui sera utilis√© dans les balises de notre template dans App.vue.

Utilisation

Voil√†, tout est install√© et pr√™t √† √™tre utilis√©. Pour afficher un menu contextuel, on va s’abonner √† un √©v√©nement : @contextmenu. Et pour √©viter que cet √©v√©nement d√©clenche l’ouverture du menu contextuel habituel, on va s’abonner √† @contextmenu.prevent.stop. Voici ce que √ßa donne si on fait une DIV “Cliquez ici” et qu’on s’abonne √† sont √©v√©nement clic-droit dans notre temple (fichier App.vue):

<template>
  <div id="app">
    <div @contextmenu.prevent.stop="handleClick($event, 'CliquezIci')">Cliquez ici</div>
  </div>
</template>

Alors, on a notre DIV avec le texte “Cliquez ici” et on s’abonne √† l’√©v√©nement @contextmenu.prevent.stop qui att√©rit sur une m√©thode “handleClick(event, item)”. J’ai mis ‘CliquezIci’ dans le handleClick afin de savoir sur quel objet j’ai cliqu√©. En effet, quand vous cliquez sur un √©l√©ment, il est bien de savoir sur quel √©l√©ment vous avez cliqu√© m√™me si dans notre exemple, on a juste un √©l√©ment DIV.

Bon maintenant, créons dans ce TEMPLATE notre menu contextuel:

<template>
  <div id="app">
    <div @contextmenu.prevent.stop="handleClick($event, 'Cliquez ici')">Cliquez ici</div>
    <vue-simple-context-menu
      :elementId="'UniqueId'"
      :options="menuItems"
      :ref="'vueSimpleContextMenu1'"
      @option-clicked="onClick"
    >
    </vue-simple-context-menu>
  </div>
</template>

Vous pouvez voir le menu dans la balise <vue-simple-context-menu…>. Il y a diff√©rents attributs :

  • elementId: c’est un ID unique pour l’√©l√©ment. Attention, comme c’est une cha√ģne de caract√®re et pas un nom de variable qui pointe vers une DATA de VueJs, il faut bien mettre entre ” et ‘.
  • options: c’est la liste de nos menus que nous verrons plus bas. Dans ce cas, comme on pointe vers une DATA de VueJs, on met juste des “.
  • ref: c’est le nom du menu contextuel qui sera utilis√© pour l’afficher dans notre m√©thode handleClick. L√† encore comme c’est un nom et pas une DATA, on met entre ” et ‘.
  • @option-clicked permet de s’abonner au click sur l’un de nos menus dans le menu contextuel. Ici, on redirige le click vers une m√©thode VueJs “onClick”.

Passons à la partie données (DATA):

data() {
    return {
      menuItems: [
        {
          name: 'Menu1',
          slug: 'menu1'
        }
      ]
    }
  }

Rien de bien incroyable, on a simplement nos menus qui appara√ģtrons dans notre menu contextuel : il s’agit d’un ARRAY (tableau) de menu. Chaque menu doit contenir une propri√©t√© “name” qui sera affich√©e. Vous √™tes libre apr√®s d’ajouter toutes les propri√©t√©s que vous souhaitez √† chaque menu mais il faut absolument cette propri√©t√© “name”.

Passons maintenant à nos méthodes :

methods: {
    handleClick(event, item) {
      this.$refs.vueSimpleContextMenu1.showMenu(event, item)
    },
    onClick(event) {
      window.alert("item: "+event.item+" - menu: "+event.option.name);
    }
  }
  • Le handleClick nous permet de savoir quand il y a un clic droit sur un √©l√©ment et donc va d√©clencher l’ouverture du menu contextuel. On voit bien qu’on appelle notre menu avec le nom qu’on lui a donn√© dans sa propri√©t√© “ref”. Ici, on va donc la rechercher dans this.$refs.{nom du menu dans ref}.showMenu(event, item). Le showMenu permet d’afficher le menu. On lui passe l’√©v√©nement de la souris (il faut que ce soit un MouseEvent car c’est cet √©v√©nement qu’il utilise pour positionner le menu contextuel. Ensuite, on lui passe l’item sur lequel on a cliqu√© afin qu’il garde une trace de l’item sur lequel on a cliqu√© pour nous pour plus tard. Cela peut √™tre un libell√©, un nom, ou m√™me un objet.
  • Le onClick quant √† lui nous indique que l’utilisateur a cliqu√© sur l’un des menus de notre menu contextuel. On re√ßoit en param√®tre un objet contenant notre item (event.item) et notre menu sur lequel l’utilisateur a cliqu√© (event.menu). Si on veut acc√©der au nom du menu sur lequel il a cliqu√©, rien de plus simple : event.menu.name.

Conclusion

Voil√†, vous avez vu que l’abonnement au clic droit est assez simple de m√™me que l’affichage d’un menu contextuel lorsqu’on a les bonnes informations et qu’on utilise des librairies qui existent toutes faites. Je vous avouerais que j’ai eu plusieurs probl√®mes avant de r√©ussir √† faire fonctionner cette librairie c’est pourquoi je vous partage ce petit tuto.

J’esp√®re qu’il vous aura plu. N’h√©sitez pas √† commenter, partager et m√™me √† vous abonner √† ce blog pour ne rien rater.

A bient√īt sur d√©veloppement-web-facile.com.

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *

%d blogueurs aiment cette page :