Directivas personalizadas en Vue: v-blur

Crear directivas personalizadas en Vue permite ir más allá de lo que ofrece el framework por defecto y mejorar la UX con reglas reutilizables. Aquí se construye paso a paso una directiva global llamada v-blur para identificar y desactivar pistas sin preview URL en Platzi Music, combinando manipulación del DOM, estilos CSS y validaciones lógicas en componentes.

¿Qué es una directiva personalizada y cuándo conviene?

Las directivas son funciones que manipulan el DOM desde atributos en el template. Cuando las directivas nativas quedan cortas, podemos crear directivas personalizadas para extender la funcionalidad. Se instalan de forma global si se usan en muchos componentes, o local si solo viven en uno o dos.

En Vue, una directiva expone hooks como bind (similar a mounted), update (similar a updated), también unbind y componentUpdated. Cada hook recibe hasta cuatro parámetros: el elemento del DOM (el), el objeto de binding con el value, modifiers y args, y referencias al Virtual DOM actual y previo (newNode, oldNode). En muchos casos, basta con usar el elemento y el binding.

Conceptos clave que se aplican aquí:

• Uso de valores truthy/falsy para decidir estilos y estados.
• Manipulación del DOM con Vanilla JavaScript: style, querySelectorAll, setAttribute, removeAttribute.
• UX consistente: filtro CSS con blur y cursor not-allowed para indicar que no es accionable.

¿Cómo se construye la directiva v-blur paso a paso?

La directiva debe desenfocar imágenes o contenedores cuando el valor asociado (previewUrl) sea falsy, y deshabilitar la interacción con sus botones. Se organiza como un objeto con un método install y un hook bind que delega en una función auxiliar.

¿Cómo aplicar blur, cursor y deshabilitar botones?

Se define una función setBlur(el, binding) que:

• Aplica el filtro CSS: el.style.filter = 'blur(3px)' si el valor es falsy; caso contrario 'none'.
• Cambia el cursor: 'not-allowed' cuando no hay preview; si no, 'inherit'.
• Busca botones internos con querySelectorAll('button') y los deshabilita con setAttribute('disabled', true) cuando el valor es falsy; si es truthy, remueve el atributo con removeAttribute('disabled').

Ejemplo del archivo directives/blur.js:

// directives/blur.js
const blur = {
  install(Vue) {
    const setBlur = (el, binding) => {
      const isUnavailable = !binding.value; // falsy => no hay previewUrl
      el.style.filter = isUnavailable ? 'blur(3px)' : 'none';
      el.style.cursor = isUnavailable ? 'not-allowed' : 'inherit';

      const buttons = el.querySelectorAll('button');
      buttons.forEach((btn) => {
        if (isUnavailable) {
          btn.setAttribute('disabled', true);
        } else {
          btn.removeAttribute('disabled');
        }
      });
    };

    Vue.directive('blur', {
      bind(el, binding) {
        setBlur(el, binding);
      }
    });
  }
};

export default blur;

Detalles importantes de habilidades aplicadas:

• Corregir propiedades de estilo: usar correctamente el.style, no variantes mal escritas.
• Cambiar etiquetas <a> por <button> para aprovechar el estado nativo disabled del navegador.
• Usar una condicional ternaria o un patrón booleano para decidir estilos y atributos.

¿Cómo se instala y se usa en componentes?

Se instala de forma global para que esté disponible en toda la app y luego se aplica en el componente de pista, pasando como valor la propiedad previewUrl.

¿Cómo instalar globalmente en main.js?

// main.js
import Vue from 'vue';
import blur from '@/directives/blur';

Vue.use(blur);

¿Cómo aplicarla en el template del buscador?

Aplicar la directiva al componente de pista, usando el valor que determina si hay preview:

<!-- search.vue -->
<template>
  <section>
    <pm-track v-blur="track.previewUrl" />
  </section>
</template>

¿Cómo reforzar la lógica en métodos para evitar selecciones inválidas?

Además de la señal visual, se bloquea la acción en los métodos que seleccionan o navegan a una pista cuando no existe previewUrl. Patrón de “cortar ejecución” con return temprano.

// track.vue (métodos)
methods: {
  selectTrack(track) {
    if (!track.previewUrl) return;
    // lógica de selección cuando sí hay preview
  },
  goToTrack(track) {
    if (!track.previewUrl) return;
    // navegación válida cuando sí hay preview
  }
}

Mejoras de UI recomendadas según lo visto:

• Reemplazar <a> por <button class="button">.
• Usar clases como is-primary e is-warning para estados visuales claros.
• Ubicar secciones al mismo nivel (por ejemplo, media y card-content) para un mejor layout.

¿Te gustaría comentar otras ideas de directivas útiles o casos donde combinarías estilos y validaciones lógicas para reforzar la experiencia del usuario?