stijlbreuk-dev / vue-color-picker-wheel Goto Github PK

colorChange should emit "color-change", otherwise it's impossible to catch the event in dom templates. Thanks!

I tried to use color-change event listener and I don't see the color value:

<template>
  <ColorPicker
    :color-change="setHex"
    :startColor="finalSettings.button_color"
    v-model="finalSettings.button_color" />
</template>
<script>
import ColorPicker from 'vue-color-picker-wheel';

export default {
        components: {
            ColorPicker,
        },
        props: {
            ...
        },
        data: function () {
            return {
                finalSettings: this.settings,
                color: this.settings.button_color,
            }
        },
        methods: {
            setHex: function(colorPalette) {
                console.log(colorPalette); // <- the console didn't display this.
                this.color = colorPalette;
            },
        }
   }
</script>

I found that the color picker was not following my mouse clicks correctly. I tracked the problem down to widgetCoords(event), which was returning incorrect co-ordinates when the browser window was scrolled away from the start position.
Suggested solution: replace all instances of pageX and pageY with clientX and clientY.

Add support for v-model by using 'value' as a prop and by using '$emit('input')' when changes have occured.

When using text-align: center it will mess up the color-picker. You can try by adding text-align: center to the style in /examples/App.vue.

Add property to delay the color change event from triggering using a debounce function or 'onmouseup'