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;