Vue Preloader Epic Spinner和内容同时加载(Vuejs)

Question

我想在内容显示之前先加载预加载程序，但是当我安装的库https://epic-spinners.epicmax.co/。它显示了预加载程序，但没有先加载。内容和预加载程序。我能问一下如何先加载预加载程序，然后在加载后显示内容吗？非常感谢。

这是代码：

也可以访问这里的代码：

https://codesandbox.io/s/jovial-tdd-ygd4s?file=/src/App.vue:0-714

App.vue

<template>
<div id="app">
<scaling-squares-spinner
:animation-duration="1250"
:size="65"
color="#ff1d5e"
/>
<img alt="Vue logo" src="./assets/logo.png" width="25%" />
<HelloWorld msg="Hello Vue in CodeSandbox!" />
</div>
</template>
<script>
import HelloWorld from "./components/HelloWorld";
import { ScalingSquaresSpinner } from "epic-spinners";
export default {
name: "App",
components: {
HelloWorld,
ScalingSquaresSpinner,
},
};
</script>
<style>
#app {
font-family: "Avenir", Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>

Answer 1

您的演示根本没有条件渲染，因此微调器将始终显示。

要在App.vue中使用微调器组件，请应用一个数据属性(最初设置为true(，该属性稍后在应用程序就绪时设置为false。

1. 声明一个默认值为true的数据属性(名为"loading"(
2. 对模板中的微调器元素使用v-if="loading"，对内容使用v-else
3. 当应用程序不再繁忙时，将loading设置为false以隐藏微调器并显示内容

<template>
<scaling-squares-spinner v-if="loading"2️⃣ />
<template v-else2️⃣>
<img alt="Vue logo" src="./assets/logo.png" width="25%" />
<HelloWorld msg="Hello Vue in CodeSandbox!" />
</template>
</template>
<script>
export default {
data() {
return {
loading: true 1️⃣
}
},
async mounted() {
await longRunningTask()
this.loading = false 3️⃣
}
}
</script>

演示