Template modal


#1

Je teste toujours les petites fonctions vue.js et m’intéresse aux modals.

Par exemple, sur une page je voudrais appeler deux modals différentes. J’ai bien vu qu’on peut overwrite le template avec des slots. Mais qu’elle est la meilleure méthode si l’on veut appeler deux modals aux templates complètement différents ?


#2

Je ne pense pas qu’il y ait de “meilleure” méthode

Pour ma part, je crée un composant Modal générique qui se charge d’avoir un design/backdrop consistent au travers de l’app, et customizable avec des slot.

Je crée ensuite chacun de mes modal dans un composant différent qui vont utiliser ce composant Modal générique :

// MyModal1
<template>
  <Modal v-if="active">
    <h1 slot="title">Mon titre 1</h1>
    <div slot="content">le contenu</div>
  </Modal>
</template>

// MyModal2
<template>
  <Modal v-if="active">
    <h1 slot="title">Mon titre 2</h1>
    <div slot="content">
      <p>un autre contenu</p>
    </div>
  </Modal>
</template>

// page principale
<template>
  <MyModal1 :active="openModal === 'modal-1'" />
  <MyModal2 :active="openModal === 'modal-2'" />
</template>

apres sur la page principale, on pourrait aussi utiliser un seul tag <component> pour switcher entre les 2.


#3

Merci, c’est comme ça que je pensais faire. Mais si par exemple tu as deux modals de taille différentes, tu overwite les class ou tu le gères directement dans le template ?