如何在没有不透明度选项的HEX模式下使用Vuetify颜色选择器(v-color-picker)

Question

所以我一直在尝试将vuetify的颜色选择器与hexa mode一起使用，如下所示：

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

我不知道如何禁用不透明度滑块，我希望能够在没有不透明度滑块的情况下保持颜色滑块。因此，在输入处，用户看到的颜色类似于#FF0000(7位(，而不是#FF0000FF(9位(。

hide-sliders道具同时隐藏它们(颜色和不透明度(，并且不透明度滑块没有特定的属性。

Answer 1

所以基本上我发现，如果我用一个只包含hex道具的对象初始化我的v-model值，颜色选择器会隐藏不透明度滑块，并且颜色值用7位数字显示：

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

Answer 2

我知道这个问题很旧，但我希望这个解决方案能帮助到别人。

这个请求还没有得到vuetify团队的回应，但是，你可以在这里遵循流程：

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

当他们不回答时，这个解决方案对我有效。

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是<v-color-picker-component>的v-model