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.
Ejecuta:
npm install vue-color
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.
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.
Yo he usado este seleccionador para un proyecto que publicaré muy pronto, al final terminé usando dos color picker y se ve así:
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.
Hoy te voy a presentar un creador de credenciales que acabo de programar y que…
Ya te enseñé cómo convertir una aplicación web de Vue 3 en una PWA. Al…
En este artículo voy a documentar la arquitectura que yo utilizo al trabajar con WebAssembly…
En un artículo anterior te enseñé a crear un PWA. Al final, cualquier aplicación que…
Al usar Comlink para trabajar con los workers usando JavaScript me han aparecido algunos errores…
En este artículo te voy a enseñar cómo usar un "top level await" esperando a…
Esta web usa cookies.