En este post te mostraré un seleccionador de colores o input de tipo color (también conocido como color picker) que me gustó para su uso con el framework Vue.

El picker del que hablo se llama vue-color y permite usar varios selectores de color.

Instalando selector de color para Vue

Ejecuta:

npm install vue-color

Importar componente

Ahora puedes usar todos los selectores disponibles. Yo me he decidido por el de Sketch, entonces lo he importado así:

Luego debemos indicar que vamos a usar ese componente dentro del nuestro:

Yo lo he renombrado como SeleccionadorColor. Ahora dentro de nuestro data colocamos los colores del componente, en mi caso solo he agregado uno:

Fíjate que he definido la propiedad colores y dentro de la misma la propiedad hex. Luego usamos el seleccionador en nuestro HTML:

Dentro de value estoy indicando la propiedad colores que definí anteriormente. Fíjate también en el evento @input que va a invocar a onColorDeFondoCambiado. Es importante que quede así, sin paréntesis.

Color cambiado

Cuando el color seleccionado cambie, se va a invocar a la función que coloquemos en @input y como primer argumento se pasará el nuevo color. Yo he definido la función así:

El argumento nuevoColor es un objeto que tiene el nuevo color seleccionado en varios formatos (puedes hacerle un console.log para depurar); yo estoy accediendo al .hex pues me interesa el hexadecimal.

Conclusión

Yo he usado este seleccionador para un proyecto que publicaré muy pronto, al final terminé usando dos color picker y se ve así:

Selector de color con Vue y JavaScript - Color picker

Selector de color con Vue y JavaScript – Color picker

Al principio iba a usar uno de Twitter pero no tenía el color negro y blanco, por lo que me decidí por usar el de sketch. Recuerda que siempre puedes encontrar más información en el repositorio oficial y que por acá puedes leer más sobre Vue.


Estoy disponible para trabajar en tu proyecto o realizar tu tarea pendiente, no dudes en ponerte en contacto conmigo.
Si el post fue de tu agrado muestra tu apoyo compartiéndolo, suscribiéndote al blog, siguiéndome o realizando una donación.

Suscribir por correo

Ingresa tu correo y recibirás mis últimas entradas sobre programación, open source, bases de datos y todo lo relacionado con informática

Únete a otros 2,601 suscriptores


parzibyte

Programador freelancer listo para trabajar contigo. Aplicaciones web, móviles y de escritorio. PHP, Java, Go, Python, JavaScript, Kotlin y más :) https://parzibyte.me/blog/software-creado-por-parzibyte/

0 Comentarios

Deja un comentario

Marcador de posición del avatar

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

A %d blogueros les gusta esto: