Vue UI Components Documentation

<template>
  <JqxColorPicker ref="myColorPicker"
    :width="250" :height="250" :color="'#ffff00'"
  />
</template>
 
<script>
  import JqxColorPicker from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxcolorpicker.vue';
 
  export default {
    components: {
      JqxColorPicker
    }
  }
</script>

Get the color property.

let color = this.$refs.myColorPicker.color;

Sets or gets the color mode.

'hue'

'saturation'

<template>
  <JqxColorPicker ref="myColorPicker"
    :width="250" :height="250" :colorMode="'hue'"
  />
</template>
 
<script>
  import JqxColorPicker from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxcolorpicker.vue';
 
  export default {
    components: {
      JqxColorPicker
    }
  }
</script>

Get the colorMode property.

let colorMode = this.$refs.myColorPicker.colorMode;

Enables or disables the color picker.

<template>
  <JqxColorPicker ref="myColorPicker"
    :width="250" :height="250" :disabled="true"
  />
</template>
 
<script>
  import JqxColorPicker from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxcolorpicker.vue';
 
  export default {
    components: {
      JqxColorPicker
    }
  }
</script>

Get the disabled property.

let disabled = this.$refs.myColorPicker.disabled;

Sets or gets the height of the color picker.

<template>
  <JqxColorPicker ref="myColorPicker"
    :width="250" :height="250"
  />
</template>
 
<script>
  import JqxColorPicker from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxcolorpicker.vue';
 
  export default {
    components: {
      JqxColorPicker
    }
  }
</script>

Get the height property.

let height = this.$refs.myColorPicker.height;

Sets or gets the showTransparent property.

<template>
  <JqxColorPicker ref="myColorPicker"
    :width="250" :height="250" :showTransparent="true"
  />
</template>
 
<script>
  import JqxColorPicker from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxcolorpicker.vue';
 
  export default {
    components: {
      JqxColorPicker
    }
  }
</script>

Get the showTransparent property.

let showTransparent = this.$refs.myColorPicker.showTransparent;

Sets or gets the width of the color picker.

<template>
  <JqxColorPicker ref="myColorPicker"
    :width="250" :height="250"
  />
</template>
 
<script>
  import JqxColorPicker from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxcolorpicker.vue';
 
  export default {
    components: {
      JqxColorPicker
    }
  }
</script>

Get the width property.

let width = this.$refs.myColorPicker.width;

This event is triggered when a new color is picked.

Code examples

Bind to the colorchange event of jqxColorPicker.

<template>
  <JqxColorPicker ref="myColorPicker" @colorchange="onColorchange($event)"
    :width="250" :height="250"
  />
</template>
 
<script>
  import JqxColorPicker from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxcolorpicker.vue';
 
  export default {
    components: {
      JqxColorPicker
    },
    methods: {
      onColorchange: function (event) {
        alert('do something...');
      }
    }
  }
</script>

Gets the color.

<template>
  <JqxColorPicker ref="myColorPicker"
    :width="250" :height="250"
  />
</template>
 
<script>
  import JqxColorPicker from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxcolorpicker.vue';
 
  export default {
    components: {
      JqxColorPicker
    },
    mounted: function () {
      const value = this.$refs.myColorPicker.getColor();
    }
  }
</script>

Sets a color.

<template>
  <JqxColorPicker ref="myColorPicker"
    :width="250" :height="250"
  />
</template>
 
<script>
  import JqxColorPicker from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxcolorpicker.vue';
 
  export default {
    components: {
      JqxColorPicker
    },
    mounted: function () {
      this.$refs.myColorPicker.setColor('#ffaaff');
    }
  }
</script>