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

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