web-dev-qa-db-fra.com

Comment désactiver le bouton Vuetify sans changer les couleurs

J'utilise le composant bouton v-btn de Vuetify avec une variété de couleurs définies via la propriété color. Une fois qu'un utilisateur a cliqué sur le bouton, j'ai défini disabled sur true pour qu'il ne puisse plus cliquer dessus, mais le bouton perd sa couleur et devient grisé.

Existe-t-il un moyen de désactiver le bouton sans changer sa couleur en gris?

buttoncolorsvuetify.jsdisable
8
Chris

Au lieu de disabled prop, vous pouvez utiliser votre classe personnalisée avec pointer-events: none , par exemple.

.disable-events {
  pointer-events: none
}

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

Ajoutez ensuite un style supplémentaire à cette classe si nécessaire.

12
Traxo

Je le fais en supprimant v-btn--disabled et jouer avec les classes css de vuetify.

Toujours gris mais avec une solution de texte en couleur

Le bouton sera toujours gris, mais le texte sera coloré, comme cela vous avez un effet visuel montrant que le bouton est désactivé mais a toujours une partie colorée.

Personnellement, j'avais également une certaine opacité personnalisée pour les boutons désactivés.

[~ # ~] 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

Même solution d'affichage

Si vous voulez vraiment, le même affichage que vous devrez supprimer [color]--text et ajouter [color] classe (et parfois ajouter white--text classe pour la lisibilité).

[~ # ~] 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