Directivas personalizadas en Vue: v-blur

Clase 36 de 53 • Curso Profesional de Vue.js 2

Resumen

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 por

Rogelio Alberto

student•

No era necesario agregar el (!this.track.preview_url) en selectTracky en goToTrack, solo bastaba con poner el bind @click en los buttons y no en el span dentro del button y ya con el disabled de la directiva se desactiva los controles de play/navegación, asi:

button.level-item.button.is-primary(@click="selectTrack")
  span.icon.is-small ▶️
button.level-item.button.is-warning(@click="goToTrack(track.id)")
  span.icon.is-small 🌎

Tambien por cuestiones de performance la directiva esta mejor asi, reduce ciclos innecesarios:

function setBlur (el, binding) {
  if (!binding.value) {
    el.style.filter = 'blur(3px)'
    el.style.cursor = 'not-allowed'
    el.querySelectorAll('button').forEach(button => {
      button.setAttribute('disabled', true)
    })
  }
}

Nacho Anaya

teacher•

Gracias por el aporte. La apreciacion que haces sobre la validacion es correcto. Con el simple hecho de agregar el atributo disabed al button alcanza para interrumpir el proceso y evidentemente lo mas correcto seria enlazar el @click al button y no al span. De todos modos agregar la validacion en el lado del codigo, tambien es una buena practica ya que esos metodos pueden ser utilizados en otro tipo de contexto (como metodos internos o en otras partes de HTML). De esta manera garantizas que eso funcione correctamente en todos lados.

Con respecto a la funcion de la directiva, no creo que mejore el rendimiento pero si es mas practico y mas facil de seguir. Lo que yo hice fue crear una funcion generica que tambien pueda ser aplicada en otros contextos o hooks de la directiva como el update y podar lograr una actualizacion en tiempo real en caso que el valor de preview_url se modifique.

Rogelio Alberto

student•

Si mejora el rendimiento, reduce el numero de comparaciones en una tercera parte (imagina cien, mil o mas resultados) ademas de que no es necesario poner estilo con js a los elementos que no tienen binding null por que ese estilo ya lo tienen con css y por esto es innecesario el if dentro del forEach.

Jesús Miguel Quinto Teran

student•

la directiva :key es muy importante para éstos casos.

Cuando realice una búsqueda después de otra, la segunda recordaba el blur de la primera, la solución fue aplicar :key="t.id" para que Vuejs reconociera correctamente las nuevas pistas. y refrescara la blur directiva.

Carlos Eduardo Gomez García

teacher•

Interesante, prácticamente las directivas me permiten ejecutar cierto código cuando el componente está cargando

Alexis Bustamante

student•

yo pense que era mas conveniente NO mostrar los Track que no tienen valor para escuchar, por lo que agregue en el método search (dentro de la vista search)

this.tracks=this.tracks.filter(v=>v.preview_url!=null)

y así dejo solo los que se puede escuchar, de todas formas agregue lo de esta clase.

Luis Gerardo López Hernández

student•

que no en este caso hubiera sido mejor instalar la directiva de forma local porque solo se usa en un componente?

José Alfonso Vargas Cruz

student•

¿y con la directiva no podemos "desvincular" el método selectTrack bindeado y asi evitar el if dentro del método selectTrack?

Manuel Ojeda

student•

El intentar desvincular un método de la manera que lo planteas deberías de revisar la lógica que tienes en tu template de Vue.

¿Porqué deseas evitar "selectTrack"?

Sylvester Josué Rojas Cañón

student•

Un recuerso actualizado: https://vuejs.org/guide/reusability/custom-directives.html#introduction

Josue Benjamin Arambide Quispe

student•

Comparto con ustedes la directiva para que pueda imprimir un sección en su proyecto, espero les sea de ayuda y tengan una idea de como hacer uso delas directivas en vue, para usarlo debe pasarle el id de la sección a imprimir. Ej. v-print=" ‘printBorrowCard’ "

const print = {};

function printSection ( el, binding ){
   //inserting css
   let style = document.createElement('style');
   style.type = 'text/css';
   style.appendChild(document.createTextNode("@media screen{#printSection{display:none}}@media print{#printSection,body{overflow:visible!important}body *{visibility:hidden}#printSection,#printSection *{visibility:visible}#printSection{position:absolute;left:0;top:0;right:0}#printSection table{width:100%!important}}"));
   document.body.appendChild(style);

   let printSection = document.getElementById('printSection');

   if (!printSection) {
      printSection = document.createElement('div');
      printSection.id = 'printSection';
      document.body.appendChild(printSection);
  }

   el.addEventListener('click', () => {
      var elemToPrint = document.getElementById(binding.value);
      if (elemToPrint) {
         printSection.innerHTML = '';
         printElement(elemToPrint);
      }
   });

   function printElement( elem ){
      let domClone = elem.cloneNode(true);
      printSection.appendChild(domClone);
      window.print();
   }
}

print.install = function( Vue ){
   Vue.directive('print',{
      bind( el, binding){
         printSection( el, binding )
      }
   })
}

export default print

Nacho Anaya

teacher•

Genial, muchas gracias por el aporte!

Omar Crespo

student•

Aqui les dejo como quedo mi blur.js y mi blur.ts por la costumbre escribe la directiva en typescript 😂

// Blur.js
const blur = {}

function setBlur (el, binding) {
  !binding.value && (() => {
    el.style['filter'] = 'blur(3px)'
    el.style['cursor'] = 'not-allowed'

    el.querySelectorAll('a').forEach(a => a.setAttribute('disable', ''))
  })()
}

blur.install = Vue => Vue.directive('blur', { bind: setBlur })

export default blur

// Blur.ts
import { VNodeDirective, VueConstructor } from "vue";

function setBlur (el: HTMLElement, binding: VNodeDirective) {
    !binding.value && (() => {
        el.style['filter'] = 'blur(3px)'
        el.style['cursor'] = 'not-allowed'

        el.querySelectorAll('a').forEach(a => a.setAttribute('disable', ''))
    })()
}

const blur = {
    install (Vue: VueConstructor) {
        Vue.directive('blur', {
            bind: setBlur
        })
    }
}

export default blur

Rapha Montenegro

student•

Alguien más con este error?

[Vue warn]: Failed to resolve directive: blur

const blur = {}

function setBlur (el, binding) {
  el.style.filter = !binding.value ? 'blur(3px' : 'none'
  el.style.cursor = !binding.value ? 'not-allowed' : 'inherit'

  el.querySelectorAll('a').forEach(a => {
    if (!binding.value) {
      a.setAttribute('disabled', true)
    } else {
      a.removeAttribute('disabled')
    }
  })
}

blur.install = function (Vue) {
  Vue.directive(blur, {
    bind (el, binding) {
      setBlur(el, binding)
    }
  })
}

export default blur

Luis Donaldo Lopez Gil

student•

El nobre de la directiva blur es con camilla simple.

blur.install = function (Vue) {
  Vue.directive('blur', {
    bind (el, binding) {
      setBlur(el, binding)
    }
  })```

Alejandro González Reyes

student•

Interesante esto de las directivas. cambiar el comportamiento de los elementos dependiendo del valor en la data

Brayan Murcia Sanchez

student•

si deseara cambiar el style completo de un elemento como podria asignar esta directiva?.

Edward Steven Ramos Palacios

teacher•

Primero deberias crear tu directiva y sus funcionalidades. Luego la debes importar local o globalmente. Localmente es importarla directo en tu archivo vue en el objeto

import MiDirectiva from '...'
directives: {
  MiDirectiva
}

Globalmente es importarla en un Index.js y luego puedes usarla en cualquier parte de tu aplicacion.

Finalmente solo debes usarla dentro de un elemento de HTML segun con el nombre que le hayas dado:

<p v-mi-directiva></p>

Brayan Murcia Sanchez

student•

si deseara cambiar el atributo class completo de un elemento como podría asignar esta directiva?.

Diego Forero

Team Platzi•

Es mejor usar binding de las directivas HTML

jonathan sanchez

student•

Además del conjunto predeterminado de directivas incluidas en el núcleo (v-model y v-show), Vue también le permite registrar sus propias directivas personalizadas. la forma primaria de reutilización y abstracción del código son los componentes; sin embargo, puede haber casos en los que necesite un acceso al bajo nivel al DOM en elementos simples, y aquí es donde las directivas personalizadas seguirían siendo útiles.

Naldo Duran

student•

👌

Rogelio Alberto

student•

Creo este capitulo va despues de filtros, puesto que aqui los mencionan.

Nacho Anaya

teacher•

Esto es correcto, ya mismo reporto el error. Gracias por avisar!

José Rodríguez

student•

Tendras algun ejemplo de uso para los parametros NewNode y oldNode?

Nacho Anaya

teacher•

En realidad serian node y oldNode. Ambos contienen referencias del virtual DOM al node que contiene la directiva en cuestion. El valor oldNode solo serviria dentro de los hooks de directivas update o componentUpdated. La diferencia esta en que en oldNode podrias acceder al estado del node antes de que se hayan modificado valores o estado.

Te dejo el link a la documentacion.

José Jesús Palacios

student•

¿Ya no está disponible el servidor?:
PLatzi-music

error 404 (The deployment could not be found)

Nacho Anaya

teacher•

Al parecer estaba caido, ahora esta funcionando de nuevo. Gracias por avisarnos!

José Jesús Palacios

student•

Gracias

Darwin Rodríguez

student•

No manda el track al reproductor

Ricardo Celis

teacher•

pero el api si te lo está trayendo? podemos comenzar el troubleshooting desde ahí

Darwin Rodríguez

student•

El problema era que el evento estaba enlazado al span y no al button, gracias!

function setBlur (el, binding) {
  if (!binding.value) {
    el.style.filter = 'blur(3px)'
    el.style.cursor = 'not-allowed'
    el.querySelectorAll('button').forEach(button => {
      button.setAttribute('disabled', true)
    })
  }
}

const print = {};

function printSection ( el, binding ){
   //inserting css
   let style = document.createElement('style');
   style.type = 'text/css';
   style.appendChild(document.createTextNode("@media screen{#printSection{display:none}}@media print{#printSection,body{overflow:visible!important}body *{visibility:hidden}#printSection,#printSection *{visibility:visible}#printSection{position:absolute;left:0;top:0;right:0}#printSection table{width:100%!important}}"));
   document.body.appendChild(style);

   let printSection = document.getElementById('printSection');

   if (!printSection) {
      printSection = document.createElement('div');
      printSection.id = 'printSection';
      document.body.appendChild(printSection);
  }

   el.addEventListener('click', () => {
      var elemToPrint = document.getElementById(binding.value);
      if (elemToPrint) {
         printSection.innerHTML = '';
         printElement(elemToPrint);
      }
   });

   function printElement( elem ){
      let domClone = elem.cloneNode(true);
      printSection.appendChild(domClone);
      window.print();
   }
}

print.install = function( Vue ){
   Vue.directive('print',{
      bind( el, binding){
         printSection( el, binding )
      }
   })
}

export default print

// Blur.js
const blur = {}

function setBlur (el, binding) {
  !binding.value && (() => {
    el.style['filter'] = 'blur(3px)'
    el.style['cursor'] = 'not-allowed'

    el.querySelectorAll('a').forEach(a => a.setAttribute('disable', ''))
  })()
}

blur.install = Vue => Vue.directive('blur', { bind: setBlur })

export default blur

// Blur.ts
import { VNodeDirective, VueConstructor } from "vue";

function setBlur (el: HTMLElement, binding: VNodeDirective) {
    !binding.value && (() => {
        el.style['filter'] = 'blur(3px)'
        el.style['cursor'] = 'not-allowed'

        el.querySelectorAll('a').forEach(a => a.setAttribute('disable', ''))
    })()
}

const blur = {
    install (Vue: VueConstructor) {
        Vue.directive('blur', {
            bind: setBlur
        })
    }
}

export default blur

const blur = {}

function setBlur (el, binding) {
  el.style.filter = !binding.value ? 'blur(3px' : 'none'
  el.style.cursor = !binding.value ? 'not-allowed' : 'inherit'

  el.querySelectorAll('a').forEach(a => {
    if (!binding.value) {
      a.setAttribute('disabled', true)
    } else {
      a.removeAttribute('disabled')
    }
  })
}

blur.install = function (Vue) {
  Vue.directive(blur, {
    bind (el, binding) {
      setBlur(el, binding)
    }
  })
}

export default blur

Directivas personalizadas en Vue: v-blur

Introducción

Aplicaciones profesionales con Vue.js

Vue como framework progresivo y reactivo

CLI y Dev Tools

Instalación de Vue.js: Node, Dev Tools y CLI

Crear una aplicación Vue con CLI y webpack

Cómo funciona webpack.config.js

Babel: transpilador de JavaScript moderno

ESLint con Standard JS: linteo automático en webpack

Configuración de Sass y Bulma en Vue

Cómo configurar Pug en Vue con webpack

Diseño de Mockups: Práctica y Colaboración en Comunidad

Creación de Vistas con Mockups y Vue.js

Manipulación del DOM

Expresiones en Vue: sintaxis doble llave

Diferencia entre v-show y v-if en el DOM

Qué es data binding en Vue.js

Computed properties en Vue.js: cómo crearlas

Qué son los watchers de Vue

Eventos Vue: directiva v-on y métodos format

Cómo construir una interfaz de búsqueda completa en Vue

Manipulación del DOM con Vue.js: Práctica y Ejercicios

REST y HTTP

Creando servicios HTTP con Fetch API

Configurar Trae con Fetch para peticiones HTTP

Cómo conectar servicios a componentes Vue

Sistema de Componentes

Cómo crear componentes en Vue

Componentes Layout en Vue con Bulma

Reactividad en Vue: $set y Object.assign

Hooks del ciclo de vida en Vue.js

Comunicación padre-hijo con props en Vue

Eventos en Vue: comunicar hijo a padre

Slots: HTML dinámico en componentes Vue

Plugin Event Bus: comunicar componentes sin relación en Vue

Vue Router

Vue Router para single page applications

Instalación de View Router paso a paso

<target-language> Spanish </target-language> Navegación programática con Vue Router

Extendiendo VueJS

Vue modifiers: cómo simplificar eventos

Filtros en Vue: conversión milisegundos a minutos