Question

我是Laravel和Vuetify的新手。我正在Vuetify中寻找一种在点击事件上在页面上添加覆盖层的方法，例如。按照https://vuetifyjs.com/en/components/progress#examples使用带有进度图标的保存，编辑，删除等...。这样做仅是为了让用户意识到它正在工作，而不会尝试再次重复单击该按钮。我似乎找不到任何有关如何添加覆盖层的Vuetify文档。任何人都可以指出我正确的文档或网站吗？

我正在思考此链接https://pygmyslowloris.github.io/vue-full-loading/中的示例。但是，我无法安装或使用任何外部库，因此它必须是本地Vuetify / VueJS。谢谢，我希望我的描述清楚。

Answer 1

做到这一点的典型方法是使用CSS，结合使用绝对定位，可见性控制和z-index。不需要vue.js魔术。

您的CSS可能看起来像这样。将适当的类分配给叠加层的外部div。

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

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

Answer 2

您可以使用全屏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;

Vuetify-在单击事件上添加加载层叠加

2 个答案: