Skip to content

Instantly share code, notes, and snippets.

@niveshsaharan
Last active November 21, 2021 12:03
Show Gist options
  • Save niveshsaharan/1c1567d8475b46d6886e387953596e9e to your computer and use it in GitHub Desktop.
Save niveshsaharan/1c1567d8475b46d6886e387953596e9e to your computer and use it in GitHub Desktop.
Vue.js Component for http://jscolor.com/
<template>
<div class="input-control color-input">
<input :value="value"
:id="id"
class="jscolor-input {hash:true,styleElement:'',onFineChange:'jsColorOnFineChange(this)'}"
@change="onChange($event.target)"
@input="onChange($event.target)"
@focus="showColorPicker"
@onFineChange="onFineChange"
ref="color_input"
maxlength="7"
/>
<span class="color-value" ref="color_span" @click="showColorPicker"></span>
</div>
</template>
<script>
import jscolor from './../plugins/jscolor/jscolor.js';
export default {
name: 'jscolor',
data(){
return {
color: ''
}
},
props: [
'value',
'id'
],
methods: {
onChange(target){
this.color = target.jscolor.toHEXString();
this.$refs.color_span.style.backgroundColor = this.color;
this.$emit('input', this.color);
},
onFineChange(e){
this.color = '#' + e.detail.jscolor;
this.$refs.color_span.style.backgroundColor = this.color;
this.$emit('input', this.color);
},
showColorPicker(){
this.$refs.color_input.jscolor.show();
}
},
mounted: function () {
window.jscolor.installByClassName('jscolor-input');
},
updated: function () {
this.$refs.color_span.style.backgroundColor = this.value;
}
}
window.jsColorOnFineChange = function(thisObj){
thisObj.valueElement.dispatchEvent(new CustomEvent("onFineChange", {detail: {jscolor: thisObj}}));
}
</script>
@niveshsaharan
Copy link
Author

niveshsaharan commented Jul 25, 2018

Use it like:

<jscolor id="colorThemeTextColor" v-model="theme_text_color"></jscolor>

Demo: https://codesandbox.io/s/6wolq8k4jz

@giekaton
Copy link

Works nice. Thanks for this.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment