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

Posted 2023-02-23

【中文标题】如何在不更改颜色的情况下禁用 Vuetify 按钮

【英文标题】：How to disable Vuetify button without changing colors

【发布时间】：2019-05-29 07:13:05

【问题描述】：

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

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

【问题讨论】：

你不能用pointer-events: none 来代替disabled 属性吗？如果需要，然后为该类添加额外的样式（不确定您是否仍希望它显示为可点击和交互的，即使在禁用时？）。此外，如果有帮助，您可以使用 vue 的 once 修饰符@click.once="val = !val"

谢谢！我从未听说过pointer-events。就我而言，这最终成为我最简单的解决方案。

【参考方案1】：

我通过删除 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

【讨论】：

点击一次并禁用后的相同显示，我们可以使用vue的.once修饰符吗？ codepen.io/anon/pen/WLMmNg 不知道 OP 想要达到什么目标，IMO 的问题太模糊了。

感谢@Traxo！我没听说过.once。这不是我需要的。我同意我的问题太含糊了。有很多我不知道的事情。就我而言，我希望允许用户在提交表单之前尽可能多地单击按钮。然后我不想让他们再点击。

谢谢@Toodoo！我最终没有尝试您的解决方案，因为@Traxo 关于添加一个类以禁用pointer-events 并按照我想要的方式设置样式的评论最终成为最简单的解决方案。

为什么这不能通过 sass 变量实现：D

【参考方案2】：

您可以使用带有pointer-events: none 的自定义类来代替disabled 属性，例如

.disable-events 
  pointer-events: none

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

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

【参考方案3】：

由于 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>

【参考方案4】：

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

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

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

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

这种方法应该可以很好地用于测试、主题化，并且不会让用户意外地切换到按钮。