如何禁用Vuetify按钮而不改变颜色

Question

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

有没有办法在禁用按钮时不改变其颜色为灰色？

- Chris

---

你可以使用自定义类和 pointer-events: none 替代 disabled 属性吗？如果需要，可以为该类添加其他样式（即使禁用，您仍希望它看起来可点击和交互）。此外，如果有帮助的话，您还可以使用 Vue 的 once 修饰符，如 @click.once="val = !val"。 - Traxo

谢谢！我以前从未听说过 pointer-events。在我的情况下，这最终成为了我最简单的解决方案。 - Chris

Answer 1

你可以使用自定义类和pointer-events: none代替disabled属性，例如：

.disable-events {
  pointer-events: none
}

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

如果需要的话，可以为该类添加其他样式。

- Traxo

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

- Toodoo

---

点击一次后禁用，我们可以使用 vue 的 .once 修饰符来实现相同的显示效果？https://codepen.io/anon/pen/WLMmNg 不确定 OP 想要实现什么，我认为问题太模糊了。 - Traxo

感谢 @Traxo！我之前没听说过 .once，但在我的情况下它并不是我所需的。我同意我的问题表述得太笼统了，许多细节我不了解。在我的情况下，我想允许用户点击按钮，直到他们提交表单。然后我不希望他们再能够点击任何按钮。 - Chris

感谢@Toodoo！我最终没有尝试您的解决方案，因为@Traxo的评论提到添加一个类来禁用pointer-events并以我想要的方式进行样式设置，这最终成为了最简单的解决方案。 - Chris

为什么这不可能通过Sass变量实现呢:D - trainoasis

Answer 3

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

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

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

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

这种方法应该能够很好地与测试、主题和用户不会意外地切换到按钮进行交互。

- Dekatron

Answer 4

由于Vuetify已经在.v-btn--disabled中使用了important！，因此无法仅覆盖此类。但是，通过使用更高级别的选择器，例如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>

- Hexodus