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

Question

我正在使用 Vuetify 的 v-btn 按钮组件，通过 color 属性设置了多种颜色。一旦用户单击该按钮，我将 disabled 设置为 true 这样他们就不能再次单击它，但是该按钮会失去颜色并变灰。

有没有办法在不将按钮颜色更改为灰色的情况下禁用该按钮？

Answer 1

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

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

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

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

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] class（有时添加 white--text class可读性）。

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 2

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

.disable-events {
  pointer-events: none
}

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

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

Answer 3

因为 Vuetify 已经在 .v-btn--disabled 中使用了 important!，所以不可能只覆盖这个 class。但是使用像 id 这样的更高级别的选择器（例如：选择 id="custom-disabled" 的 #custom-disabled）你可以。这不会保留原始颜色，但您至少可以根据自己的喜好覆盖 class。

<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

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

您可以手动覆盖样式并更改 css 中禁用的按钮颜色，但是如果您通过 color="" 属性手动设置颜色，这可能会成为问题v-btn 基于主题（例如，因为您的应用程序支持不同客户端的品牌）因为 Vuetify 不只是覆盖颜色，它会完全停止添加颜色。

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

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

这种方法应该可以很好地进行测试、主题设置，并且不会让用户意外地跳到按钮。

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

How to disable Vuetify button without changing colors

colors

button

vuetify.js

disable