En développement front-end, les composanst standards s'écartent parfois légèrement des maquettes de design. Plutôt que de tout réécrire, encapsuler des composants existants permet de gagner du temps tout en respectant les contraintes. À titre d'exemple, le composant MessageBox d'Element UI offre une base flexible pour des adaptations sur mesure.

Ce composant autorise de nombreuses configurations. Voici comment l'utiliser avec du contenu dynamique :

<template>
  <el-button type="text" @click="ouvrirDialog">Lancer la boîte de dialogue</el-button>
</template>

<script>
  export default {
    methods: {
      ouvrirDialog() {
        const cree = this.$createElement;
        this.$msgbox({
          title: 'Avis',
          message: cree('p', null, [
            cree('span', null, 'Le support est '),
            cree('i', { style: 'color: teal' }, 'virtuel')
          ]),
          showCancelButton: true,
          confirmButtonText: 'Accepter',
          cancelButtonText: 'Rejeter',
          beforeClose: (action, instance, done) => {
            if (action === 'confirm') {
              instance.confirmButtonLoading = true;
              instance.confirmButtonText = 'Traitement...';
              setTimeout(() => {
                done();
                setTimeout(() => {
                  instance.confirmButtonLoading = false;
                }, 300);
              }, 3000);
            } else {
              done();
            }
          }
        }).then(action => {
          this.$message({
            type: 'info',
            message: 'Action effectuée : ' + action
          });
        });
      }
    }
  }
</script>

Pour intégrer des exigences graphiques spécfiiques, il est utile de construire un composant enveloppant. On peut ainsi créer une version personnalisée appelée DialogueCustom.

Architecture du module

Fichier principle index.js :

import { MessageBox } from 'element-ui'
import './DialogueCustom.scss'

export default function(
  enTete = 'Information',
  corps = 'Message par défaut',
  symbole = 'info'
) {
  const generateur = this.$createElement
  return MessageBox({
    message: generateur('div', null, [
      generateur(
        'div',
        {
          class: {
            'entete-dialogue': true
          }
        },
        [
          generateur('svg-icon', {
            props: {
              'icon-class': symbole,
              'class-name': 'icone-dialogue'
            }
          }),
          generateur(
            'span',
            {
              class: {
                'titre-dialogue': true
              }
            },
            enTete
          )
        ]
      ),
      generateur(
        'div',
        {
          class: {
            'contenu-dialogue': true
          }
        },
        corps
      )
    ]),
    customClass: 'fenetre-dialogue',
    showCancelButton: true,
    confirmButtonText: 'Valider',
    cancelButtonText: 'Annuler'
  })
}

Styles associés dans DialogueCustom.scss :

.fenetre-dialogue {
  padding-bottom: 24px;

  .el-message-box__content {
    padding: 36px 24px;

    .entete-dialogue {
      display: flex;
      flex-direction: row;
      justify-content: flex-start;
      align-items: center;
    }

    .icone-dialogue {
      width: 16px;
      height: 16px;
    }

    .titre-dialogue {
      display: block;
      padding-left: 12px;
      font-size: 16px;
      font-weight: 500;
      color: $primary-font;
      line-height: 24px;
    }

    .contenu-dialogue {
      padding: 12px 0 0 28px;

      font-size: 14px;
      font-weight: 400;
      color: $primary-font;
      line-height: 22px;
    }
  }
}

Intégration

Dans le fichier main.js, enregistrez le composant globalement :

import DialogueCustom from '@/components/DialogueCustom'
Vue.prototype.$dialogueCustom = DialogueCustom

Invocation dans un composant Vue :

      this.$dialogueCustom(
        'Confirmation requise',
        'Veuillez vérifier les détails avant de continuer'
      )
        .then(async () => {
          // Action à exécuter après validation
        })
        .catch(() => {
          // Traitement en cas de refus
        })