Как отключить кнопку Vuetify без изменения цвета

Question

Я использую кнопку Vuetify v-btn с различными цветами, установленными с помощью color. Когда пользователь нажимает кнопку, я устанавливаю disabled на true, чтобы они не могли щелкнуть ее снова, но кнопка теряет свой цвет и становится серой.

Есть ли способ отключить кнопку, не меняя ее цвет на серый?

Answer 1

Вместо disabled prop вы можете использовать свой пользовательский класс с pointer-events: none, например.

.disable-events {
  pointer-events: none
}

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

Затем добавьте дополнительные стили для этого класса, если необходимо.

Answer 2

Я делаю это, удаляя 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