[Vuejs]-Vuetify – Add loading layer overlay on click event

by

0👍

✅

The typical way to do this is with css, using a combination of absolute positioning, visibility control, and z-index. No vue.js magic required.

Your css might look something like this. Assign the appropriate class to the outer div of your overlay.

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

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

8👍

You could do this with a fullscreen v-dialog and a progress component inside.

Like this: 

<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>

And then when @click occurs:

loading = true;

And when loading is done: 

loading = false;
👤Marcus

Leave a comment