web-dev-qa-db-ja.com

色を変更せずにVuetifyボタンを無効にする方法

Vuetifyの v-btn ボタンコンポーネントを使用して、colorプロパティを介してさまざまな色を設定しています。ユーザーがボタンをクリックしたら、disabledをtrueに設定して、再度クリックできないようにしますが、ボタンの色が失われ、灰色になります。

色を灰色に変更せずにボタンを無効にする方法はありますか？

buttoncolorsvuetify.jsdisable
8
Chris

disabledプロップの代わりに、カスタムクラスを pointer-events: none 、たとえば.

.disable-events {
  pointer-events: none
}

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

次に、必要に応じてそのクラスにスタイルを追加します。

12
Traxo

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

3
Toodoo