Skip to content
Alebat

Modal

1. TheModal.vue

El componente TheModal es un modal personalizable que se muestra como un diálogo en la pantalla. No utiliza JavaScript añadido, debido a que se utiliza el dialog de HTML5 para mostrar el modal. Tiene las siguientes características:

Propiedades (props)

  • showModal (boolean, requerido): Determina si el modal está visible. Cuando es true, el modal se abre; cuando es false, el modal se cierra.
  • backgroundColor (string, opcional): Color de fondo del modal. Si no se especifica, se utiliza el color predeterminado var(--c-black).

Eventos (emits)

  • close: Emitido cuando el usuario hace clic en el botón de cierre del modal, indicando que el modal debe cerrarse.

Computed Properties

  • styles: Calcula los estilos en línea, permitiendo modificar el color de fondo a través de backgroundColor.

Template (estructura HTML)

El modal usa un <dialog> para abrir el modal y un botón de cierre personalizado:

<dialog :open="showModal" :style="styles">
  <button class="close-button" @click="$emit('close')">✖</button>
  <slot />
</dialog>

Estilos (scss)

  • Diálogo (dialog): Estilo de posición fija para el modal, con transiciones de entrada y salida.
  • Botón de cierre (close-button): El botón permite cerrar el modal y cuenta con animaciones de escala y rotación.

2. useModal.ts

useModal es un hook que controla la lógica para abrir, cerrar y gestionar el estado del modal. Este hook facilita el manejo de datos dinámicos en el modal.

Funciones

  • useOpenModal: Activa el modal, estableciendo showModal en true.
  • useCloseModal: Cierra el modal, estableciendo showModal en false.
  • useOpenModalWithData<T>(data: T): Abre el modal y envía datos personalizados al mismo. Esta función es útil para mostrar contenido específico o dinámico en el modal.
  • useAutoCloseModal: Abre el modal automáticamente y lo cierra después de 5 segundos.

Variables Reactivas

  • showModal: Controla el estado de visibilidad del modal (true para abierto, false para cerrado).
  • dataModal: Almacena datos que se pasan al modal, permitiendo mostrar contenido dinámico.

3. Ejemplo de Uso

<script setup lang="ts">
import { useModal } from "@/composables/useModal";
const { showModal, useCloseModal, useOpenModalWithData, dataModal } =
  useModal();


// Lógica para abrir el modal con datos específicos
useOpenModalWithData({ id: 1 });
</script>


<template>
  <TheModal :show-modal="showModal" @close="useCloseModal">
    <video
      class="image"
      controls
      controlslist="nodownload"
      src="https://media.alebat.com/media/2024/7/PROMO_PORTUGUES_VISITA_UNIMED_V4_36f64d03e3.webm"
    ></video>
    <h2>modal</h2>
    <p>Video Numero: {{ dataModal?.id }}</p>
  </TheModal>
</template>

4. Buenas Prácticas

  • Control de Estado: Utiliza el hook useModal para mantener el estado del modal centralizado y limpio.
  • Datos Dinámicos: Usa useOpenModalWithData cuando necesites mostrar datos personalizados, como en el ejemplo de video.
  • Transiciones y Animaciones: Personaliza las animaciones de CSS para mejorar la experiencia visual según las necesidades de la interfaz de usuario.