Skip to content

Instantly share code, notes, and snippets.

@robertdrakedennis
Created November 11, 2019 08:46
Show Gist options
  • Save robertdrakedennis/6bf99c8d6744c62d88ae43f8e3341de4 to your computer and use it in GitHub Desktop.
Save robertdrakedennis/6bf99c8d6744c62d88ae43f8e3341de4 to your computer and use it in GitHub Desktop.
Dead simple way to mount pickr with vue.
<template>
<div>
<input type="hidden" name="color" v-model="color">
<div class="flex flex-row items-center">
<div class="color-picker h-16 w-16 rounded shadow"></div>
<div class="ml-2 text-neutral-200">
<div class="flex flex-col text-sm">
<span>Color:</span>
<span>Choose a color.</span>
</div>
</div>
</div>
</div>
</template>
<script>
import '@simonwep/pickr/dist/themes/nano.min.css';
import Pickr from '@simonwep/pickr';
export default {
name: "ColorComponent",
data() {
return {
pickr: null,
color: null
}
},
mounted() {
this.pickr = Pickr.create({
el: '.color-picker',
theme: 'nano', // or 'monolith', or 'nano'
swatches: [
],
components: {
// Main components
preview: true,
opacity: false,
hue: true,
// Input / output Options
interaction: {
hex: true,
rgba: false,
hsla: false,
hsva: false,
cmyk: false,
input: true,
clear: true,
save: true
}
}
});
this.pickr.on('save', (color, instance) => {
this.color = color.toHEXA().toString();
});
}
}
</script>
<style scoped>
</style>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment