VueJS

Selector de color con Vue (color picker)

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í:

import { Sketch } from "vue-color";

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

export default {
  components: {
    SeleccionadorColor: Sketch,
  },
}

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

  data: () => ({
    colores: {
      hex: "#000000",
    },
  }),

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

<SeleccionadorColor
  @input="onColorDeFondoCambiado"
  :value="colores"
></SeleccionadorColor>

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í:

onColorDeFondoCambiado(nuevoColor) {
  const colorHexadecimal = nuevoColor.hex;
},

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

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 aquí para ayudarte 🤝💻


Estoy aquí para ayudarte en todo lo que necesites. Si requieres alguna modificación en lo presentado en este post, deseas asistencia con tu tarea, proyecto o precisas desarrollar un software a medida, no dudes en contactarme. Estoy comprometido a brindarte el apoyo necesario para que logres tus objetivos. Mi correo es parzibyte(arroba)gmail.com, estoy como@parzibyte en Telegram o en mi página de contacto

No te pierdas ninguno de mis posts 🚀🔔

Suscríbete a mi canal de Telegram para recibir una notificación cuando escriba un nuevo tutorial de programación.
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/

Entradas recientes

Creador de credenciales web – Aplicación gratuita

Hoy te voy a presentar un creador de credenciales que acabo de programar y que…

17 horas hace

Desplegar PWA creada con Vue 3, Vite y SQLite3 en Apache

Ya te enseñé cómo convertir una aplicación web de Vue 3 en una PWA. Al…

1 semana hace

Arquitectura para wasm con Go, Vue 3, Pinia y Vite

En este artículo voy a documentar la arquitectura que yo utilizo al trabajar con WebAssembly…

1 semana hace

Vue 3 y Vite: crear PWA (Progressive Web App)

En un artículo anterior te enseñé a crear un PWA. Al final, cualquier aplicación que…

1 semana hace

Errores de Comlink y algunas soluciones

Al usar Comlink para trabajar con los workers usando JavaScript me han aparecido algunos errores…

1 semana hace

Esperar promesa para inicializar Store de Pinia con Vue 3

En este artículo te voy a enseñar cómo usar un "top level await" esperando a…

1 semana hace

Esta web usa cookies.