代码之家 › 专栏 › 技术社区 › Chris

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

disable vuetify.js colors button

1

Chris · 技术社区 · 7 年前

我用的是Vuetify v-btn 按钮组件,通过 color 支柱。一旦用户单击按钮,我就设置 disabled 到 true 所以他们不能再点击它,但是按钮会失去颜色,变灰。

是否有任何方法可以在不将按钮颜色更改为灰色的情况下禁用按钮?

2 回复 | 直到 7 年前

1

Traxo 7 年前

而不是 disabled 可以使用自定义类 pointer-events: none ,例如

.disable-events {
  pointer-events: none
}

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

如果需要的话,可以为这个类添加额外的样式。

2

1

Toodoo 7 年前

我把它移走 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