38 lines
1.1 KiB
Markdown
38 lines
1.1 KiB
Markdown
|
# 全局loading
|
|||
|
|
|
|||
|
|
全局 loading 指的是页面刷新时出现的加载效果，通常是一个旋转的图标：
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
## 原理
|
|||
|
|
|
|||
|
|
由 `vite-plugin-inject-app-loading` 插件实现，插件会在每个页面的注入一个全局的 loading html。
|
|||
|
|
|
|||
|
|
## 关闭
|
|||
|
|
|
|||
|
|
如果你不需要全局 loading，可以在 `.env` 文件中关闭：
|
|||
|
|
|
|||
|
|
```bash
|
|||
|
|
VITE_INJECT_APP_LOADING=false
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
## 自定义
|
|||
|
|
|
|||
|
|
如果你想要自定义全局 loading，可以在应用目录下，与`index.html`同级，创建一个`loading.html`文件，插件会自动读取并注入。这个html可以自行定义样式和动画。
|
|||
|
|
|
|||
|
|
::: tip
|
|||
|
|
|
|||
|
|
- 你可以使用跟`index.html`一样的语法，比如`VITE_GLOB_APP_TITLE`变量，来获取应用的标题。
|
|||
|
|
- 必须保证有一个`id="__app-loading__"`的元素，插件会在这个元素下注入内容。
|
|||
|
|
- 必须保证有一个`style[data-app-loading="inject-css"]`的元素，插件会在这个元素下注入样式。
|
|||
|
|
|
|||
|
|
```html
|
|||
|
|
<style data-app-loading="inject-css">
|
|||
|
|
/* ... */
|
|||
|
|
</style>
|
|||
|
|
<div id="__app-loading__">
|
|||
|
|
<!-- ... -->
|
|||
|
|
<div class="title"><%= VITE_GLOB_APP_TITLE %></div>
|
|||
|
|
</div>
|
|||
|
|
```
|