Custom color viewer about vue-accessible-color-picker

[kleinfreund]

For showing the currently selected color in another place of a component, you can use the color-change event.

Let’s say you have a Vue component using the color picker like so:

<template>
  <ColorPicker
    color="#ff8800"
    @color-change="setColor"
  />

  <div
    class="color-preview"
    style="background-color: #ff8800;"
  />
</template>

you can use the color-change event to call a method of your component (here, I called it setColor). With it, you can set a data property in your component:

import { ColorPicker } from 'vue-accessible-color-picker';

export default {
  name: 'MyComponent',

  components: {
    ColorPicker,
  },

  data() {
    return {
      currentColor: '#ff8800',
    }
  },

  methods: {
    setColor(colorData) {
      this.currentColor = colorData.colors.hex
    },
  },
}

in your component, you can then preview the color like this:

<template>
  <ColorPicker
    :color="currentColor"
    @color-change="setColor"
  />

  <div
    class="color-preview"
    :style="`background-color: ${currentColor};`"
  />
</template>

Make sure you size the div element so that it has dimensions (e.g. by setting width and height on the .color-preview class).

Does that help you?

[NeroN7F]

Thank you

Seems I screwed before

<ColorPicker :color="color.color" :visible-formats="['hex', 'rgb']" default-format="hex" alpha-channel="hide" @color-change="updateColor"/>

<span v-bind:style="color">f1</span>

methods:{
    updateColor (eventData) {
      this.color = JSON.parse(eventData)
    }
}

Your solution much better