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

Question

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

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

Answer 1

Вместо disabled опора вы можете использовать свой собственный класс с 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

Answer 3

Хорошо, поэтому вы можете сделать это, отключив события указателя, как указано в других комментариях, но если кто-то использует клавиатуру, он все еще может перейти к элементу управления, и если вы пишете автоматические тесты, кнопку все равно можно нажать.

Вы можете вручную переопределить стиль и изменить цвет отключенной кнопки в CSS, однако это потенциально может стать проблемой, если вы вручную устанавливаете цвет через собственность на на основе темы (потому что ваше приложение поддерживает брендинг, например, для разных клиентов), потому что Vuetify не просто переопределяет цвет, он полностью прекращает добавление цвета.

Поэтому моим решением было просто установить цвет кнопки с помощью атрибута стиля и установить важный флаг (чтобы переопределить отключенный важный флаг), обратите внимание, что вам также нужно будет изменить цвет текста.

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

Такой подход должен хорошо сочетаться с тестированием, темами и не позволит пользователям случайно перейти к кнопке.

Answer 4

Как Vuetify уже используют important! в .v-btn--disabledневозможно просто переопределить этот класс. Но с использованием селектора более высокого уровня, такого как id (пример: #custom-disabled который выбирает 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>