xiaokaike/vue-color

alpha values are not passed correctly

Closed this issue · 1 comments

thank you for the great package, ..

I'm facing some issues regarding passing alpha ( transparency ) to final output, I'm sure sure if this issue related to my code implementation or its a general thing. i'm using the package together with laravel and vuex.

in my color picker component i have declared the plugin like this

<template>

  <input type="text" 
    name="color" 
    placeholder="Enter RGBA color values"                   
    v-model="colors.hex"
    required autocomplete="off"> // shows the color value to user

   <sketch-picker v-model="colors"/> // this generate color picker instance

</template>

<script>
import {mapState} from 'vuex'
import { Sketch } from 'vue-color'
export default {
      name: 'advancedColorPicker',
      data () {
        return {
            colors : { hex: '#194d33' }
        }
      },
      components: {
        'sketch-picker': Sketch
      },
    methods: {
        changeColor : function(updatedColor){
            return this.colors.hex = updatedColor;
        }
    }
}
</script>

with the code above i was able to generate the sketch color picker instance on the page correctly but if i changed the alpha value the output color value doesn't include the transparency value every single time. (its always solid color)

Is there is any issue with my implementation above ????

If you need it in the hex format, it's stored in the hex8 property of the updatedColor object, if you need the decimal representation, you can find it in updatedColor.a.

if you do a quick console.log(updatedColor); in your changeColor method, you'll see all of the properties.