Vuetify - добавить оверлей загрузочного слоя при клике

Question

Я новичок в Laravel и Vuetify. Я ищу способ в Vuetify добавить наложенный слой поверх страницы на событие клика, например. Сохраните, отредактируйте, удалите и т. Д. Со значком прогресса в соответствии с https://vuetifyjs.com/en/components/progress#examples. Это только для того, чтобы пользователь знал, что он работает, и не пытался повторить повторное нажатие кнопки. Я не могу найти документацию Vuetify о том, как добавить оверлейный слой. Кто-нибудь может указать мне правильную документацию или веб-сайт?

Я думаю где-то в примере по этой ссылке https://pygmyslowloris.github.io/vue-full-loading/. Однако я не могу установить или использовать какую-либо внешнюю библиотеку, поэтому она должна быть родной Vuetify / VueJS. Спасибо, и я надеюсь, что мое описание понятно.

Answer 1

Вы можете сделать это с помощью полноэкранного v-диалога и компонента прогресса внутри.

Вот так:

<v-dialog v-model="loading" fullscreen full-width>
  <v-container fluid fill-height style="background-color: rgba(255, 255, 255, 0.5);">
    <v-layout justify-center align-center>
      <v-progress-circular
        indeterminate
        color="primary">
      </v-progress-circular>
    </v-layout>
  </v-container>
</v-dialog>

А потом, когда происходит @click:

loading = true;

А когда загрузка завершена:

loading = false;

Answer 2

Типичный способ сделать это с помощью CSS, используя комбинацию абсолютного позиционирования, контроля видимости и z-индекса. Магия vue.js не требуется.

Ваш CSS может выглядеть примерно так. Назначьте соответствующий класс для внешнего div вашего оверлея.

.popup-visible {
    position: absolute;
    z-index: 10;
    visibility: visible;
}

.popup-hidden {
    position: absolute;
    z-index: 10;
    visibility: hidden;
}