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

Question

我正在使用 Vuetify 的 v-btn 按钮组件，并通过

color

属性设置各种颜色。用户单击按钮后，我将

disabled

设置为

true

，这样他们就无法再次单击它，但按钮会失去颜色并变灰。

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

Answer 1

您可以使用带有

disabled

 的自定义类来代替 

pointer-events: none 属性，例如

.disable-events {
  pointer-events: none
}

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

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

Answer 2

我通过删除

v-btn--disabled

并使用 vuetify 的 css 类来做到这一点。

---

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

按钮仍然是灰色的，但文本将是彩色的，就像你有一个视觉效果，显示按钮被禁用，但仍然有彩色部分。

我个人也对禁用按钮进行了一些自定义不透明度。

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

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

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

代码笔

---

相同的显示解决方案

如果您确实想要，则必须删除

[color]--text

并添加

[color]

类（有时添加

white--text

类以提高可读性）。

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')
    })
}

代码笔

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>

Answer 4

好吧，您可以通过禁用其他评论中提到的指针事件来做到这一点，但如果有人使用键盘，他们仍然可以使用 Tab 键切换到控件，如果您正在编写自动化测试，仍然可以单击按钮。

您可以手动覆盖样式并更改 css 中禁用的按钮颜色，但是如果您根据主题通过

color=""

上的

v-btn

属性手动设置颜色（因为您的应用程序支持品牌），这可能会出现问题例如，对于不同的客户端）因为 Vuetify 不仅会覆盖颜色，还会完全停止添加颜色。

所以我的解决方案是简单地通过样式属性设置按钮颜色并设置重要标志（以覆盖禁用的重要标志）请注意，您还需要更改文本颜色。

<v-btn
    :style="{
        color: `${getTxtColor()} !important`,
        backgroundColor: `${getBtnColor()} !important`
    }"
    :disabled="status"
    @click="doSomething"
>
  Click Here
</v-btn>

这种方法应该能够很好地进行测试、主题化，并且不会允许用户意外地点击按钮。

Answer 5

对于 vuetify 3：

.v-btn__overlay
   opacity: 0!important