admin-vben5/docs/src/guide/in-depth/loading.md
Vben b6415fad2d
perf: optimize for some details and comments (#4030)
* perf: optimize for some details and comments

* fix: test case

* chore: update ci
2024-08-04 05:42:59 +08:00

1.0 KiB
Raw Blame History

全局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__"的元素。
  • 必须保证有一个style[data-app-loading="inject-css"]的元素。
<style data-app-loading="inject-css">
  /* ... */
</style>
<div id="__app-loading__">
  <!-- ... -->
  <div class="title"><%= VITE_APP_TITLE %></div>
</div>