CODEWITHSUNDEEP
vuetify.js
Arthur Borba
Arthur Borba

Reputation: 463

How to use Vuetify color picker (v-color-picker) at HEX mode without opacity option

So I've been trying to use vuetify's color picker with hexa mode like this:

      <v-color-picker
        v-model="color"
        mode="hexa"
        hide-mode-switch
        class="mb-4"
      />

And I can't figure out how to disable the opacity slider, I want to be able to keep the color slider without the opacity one. So at the input the user sees the color like #FF0000 (7 digits) and not #FF0000FF (9 digits).

The hide-sliders prop hide them both (color and opacity) and there is not a specific one to the opacity slider.

Upvotes: 3

Views: 5595

Answers (2)

tluis9
tluis9

Reputation: 1

I know the problem is old, but I hope this solution helps someone.

This request has not yet been answered by the vuetify team, however, you can follow the process here:

https://github.com/vuetifyjs/vuetify/issues/9590

When they don't answer, this solution worked for me.

watch: {
    color(value) {
      // temporary fix while there is no way to disable the alpha channel in the colorpicker component: https://github.com/vuetifyjs/vuetify/issues/9590
      if (value.toString().match(/#[a-zA-Z0-9]{8}/)) {
        this.color = value.substr(0, 7);
      }
    }
}

color is the v-model of the <v-color-picker-component>

Upvotes: 0

Arthur Borba
Arthur Borba

Reputation: 463

So basically I found out if I init my v-model value with a object containing only a hex prop, the color picker hides the opacity slider and the color value is displayed with the 7 digits:

mounted() {
  this.color = {
    hex: '#FFF',
  };
},

Upvotes: 2

Related Questions