laravel Vuetify - 在点击事件上添加加载层叠加
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/53246403/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Vuetify - Add loading layer overlay on click event
提问by Allie Syadiqin
I am new to Laravel and Vuetify. I am looking for a way in Vuetify to add an overlay layer over the page on a click event, eg. Save, Edit, Delete, etc... with a progress icon as per https://vuetifyjs.com/en/components/progress#examples. Its only so the user is aware that it is working and not try to repeat clicking the button again. I can't seem to find any Vuetify documentation on how to add overlay layer. Anyone can point me to the right documentation or website?
我是 Laravel 和 Vuetify 的新手。我正在 Vuetify 中寻找一种方法来在单击事件的页面上添加覆盖层，例如。保存，编辑，删除等...带进度图标按https://vuetifyjs.com/en/components/progress#examples。它只是让用户知道它正在工作，而不是尝试再次重复单击按钮。我似乎找不到任何关于如何添加覆盖层的 Vuetify 文档。任何人都可以指向我正确的文档或网站？
I am thinking somewhere along the example in this link https://pygmyslowloris.github.io/vue-full-loading/. However, I am unable to install or use any external library so it must be native Vuetify/VueJS. Thanks and I hope my description is clear.
我正在考虑此链接https://pygmyslowloris.github.io/vue-full-loading/ 中的示例中的某个地方。但是，我无法安装或使用任何外部库，因此它必须是本机 Vuetify/VueJS。谢谢，我希望我的描述清楚。
采纳答案by Jim B.
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.
执行此操作的典型方法是使用 css，结合使用绝对定位、可见性控制和 z-index。不需要 vue.js 魔法。
Your css might look something like this. Assign the appropriate class to the outer div of your overlay.
您的 css 可能看起来像这样。将适当的类分配给叠加层的外部 div。
.popup-visible {
position: absolute;
z-index: 10;
visibility: visible;
}
.popup-hidden {
position: absolute;
z-index: 10;
visibility: hidden;
}
回答by Marcus
You could do this with a fullscreen v-dialog and a progress component inside.
您可以使用全屏 v 对话框和其中的进度组件来完成此操作。
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:
然后当@click 发生时：
loading = true;
And when loading is done:
当加载完成时：
loading = false;
