Question

我正在使用Vuetify的v-btn按钮组件，该组件具有通过color道具设置的各种颜色。用户单击按钮后，我将disabled设置为true，以使他们无法再次单击它，但是按钮失去了颜色并变灰。

有什么方法可以禁用按钮而不将其颜色更改为灰色？

Answer 1

您可以将自定义类与pointer-events: none结合使用，而不是disabled道具，例如

.disable-events {
  pointer-events: none
}

<v-btn :class="{'disable-events': customCondition}">

然后根据需要向该类添加其他样式。

Answer 2

我通过删除v-btn--disabled并使用vuetify的css类来做到这一点。

仍为灰色，但带有彩色文本解决方案

该按钮仍将是灰色，但文本将被着色，就像您具有视觉效果，显示该按钮已被禁用，但部分仍带有颜色。

我个人对禁用的按钮也有一些自定义的不透明性。

HTML

<v-btn id="btnA" :disabled="true" color="success">Success</v-btn>

CSS

button.v-btn[disabled] {
  opacity: 0.6;
}

JS

created(){
    // Trick to remove class after initialising form
    this.$nextTick(() => {
        document.getElementById('btnA').classList.remove('v-btn--disabled')      
    })
}

CodePen

相同的显示解决方案

如果您确实需要，则必须删除[color]--text并添加[color]类（有时为提高可读性而添加white--text类）。

JS

created(){
    // Trick to remove class after initialising form
    this.$nextTick(() => {
        document.getElementById('btnA').classList.remove('v-btn--disabled')
        document.getElementById('btnA').classList.remove('success--text')
        document.getElementById('btnA').classList.add('success')
    })
}

CodePen

Answer 3

由于Vuetify已在important!中使用.v-btn--disabled，因此无法仅覆盖此类。但可以使用更高级别的选择器，例如id（例如：#custom-disabled选择id="custom-disabled"），您可以。这不会保留原始颜色，但是您至少可以根据自己的喜好覆盖类。

<v-btn :disabled="true" id="custom-disabled">
    Button
</v-btn>

<style>
#custom-disabled.v-btn--disabled {
    background-color: red !important;
}
</style>

对于明暗主题：

<style>
#custom-disabled.v-btn--disabled.theme--light {
    background-color: red !important;
}
#custom-disabled.v-btn--disabled.theme--dark {
    background-color: brown !important;
}
</style>

如何在不更改颜色的情况下禁用Vuetify按钮

3 个答案: