Vue component for two-way binding of jQuery wpColorPicker plugin and Vue.js model
This may be used for WordPress themes and plugins based on Vue.js
Tested for WordPress v 4.6.1 ... 4.7.3 and Vue 2.2.1
Based on this sample: https://vuejs.org/v2/examples/select2.html
| Vue.component('colorPicker', { | |
| props: ['value'], | |
| template: '<input type="text">', | |
| mounted: function () { | |
| var vm = this; | |
| $(this.$el) | |
| .val(this.value) | |
| // WordPress color picker | |
| .wpColorPicker({ | |
| defaultColor: this.value, | |
| change: function(event, ui) { | |
| // emit change event on color change using mouse | |
| vm.$emit('input', ui.color.toString()); | |
| }}); | |
| }, | |
| watch: { | |
| value: function (value) { | |
| // update value | |
| $(this.$el).wpColorPicker('color', value); | |
| } | |
| }, | |
| destroyed: function () { | |
| $(this.$el).off().wpColorPicker('destroy'); // (!) Not tested | |
| } | |
| }); |
| <div id="demo"></div> | |
| <script type="text/x-template" id="demo-template"> | |
| <color-picker v-model="color" placeholder="#000000"></color-picker> | |
| </script> |
| var vm = new Vue({ | |
| el: '#demo', | |
| template: '#demo-template', | |
| data: { | |
| color: '#ff0000' // this will be binded to wpColorPicker | |
| } | |
| }) |