20

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

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

4

4 回答 4

32

而不是disabledprop 你可以使用你的自定义类pointer-events: none，例如 

.disable-events {
  pointer-events: none
}

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

如果需要，然后为该类添加其他样式。

于 2019-01-22T13:45:28.213 回答
5

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

代码笔

相同的显示解决方案

如果你真的想要，你将不得不删除[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')
    })
}

代码笔

于 2019-01-03T14:58:26.643 回答
2

由于 Vuetify 已经在其中使用important!，.v-btn--disabled因此无法仅覆盖此类。但是通过使用更高级别的选择器id（例如：#custom-disabledwhich selects 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>
于 2020-09-06T09:58:48.820 回答
0

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

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

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

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

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

于 2021-10-18T13:20:58.020 回答