mirror of
https://github.com/imdap/ruoyi-plus-vben5.git
synced 2026-05-07 18:51:46 +08:00
8230493651
* chore(@vben/docs): 完成guide文档的翻译 * chore(@vben/docs): 完成other文档的翻译 * chore: 翻译部分文档 * chore: 完成英文config的配置 * chore: 完成in-depth的文档翻译 * chore: 调整调整链接 * chore: typo * chore: typo * chore: update links --------- Co-authored-by: Li Kui <90845831+likui628@users.noreply.github.com>
1.2 KiB
1.2 KiB
全局loading
全局 loading 指的是页面刷新时出现的加载效果，通常是一个旋转的图标：
原理
由 vite-plugin-inject-app-loading 插件实现，插件会在每个应用的注入一个全局的 loading html。
关闭
如果你不需要全局 loading，可以在 .env 文件中关闭：
VITE_INJECT_APP_LOADING=false
自定义
如果你想要自定义全局 loading，可以在应用目录下，与index.html同级，创建一个loading.html文件，插件会自动读取并注入。这个html可以自行定义样式和动画。
::: tip
- 你可以使用跟
index.html一样的语法，比如VITE_APP_TITLE变量，来获取应用的标题。 - 必须保证有一个
id="__app-loading__"的元素。 - 给
id="__app-loading__"的元素，加一个hiddenclass。 - 必须保证有一个
style[data-app-loading="inject-css"]的元素。
<style data-app-loading="inject-css">
#__app-loading__.hidden {
pointer-events: none;
visibility: hidden;
opacity: 0;
transition: all 1s ease-out;
}
/* ... */
</style>
<div id="__app-loading__">
<!-- ... -->
<div class="title"><%= VITE_APP_TITLE %></div>
</div>