я хочу сначала загрузить предварительный загрузчик перед отображением контента, однако, когда я устанавливаю библиотеку 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>
В вашей демонстрации вообще нет условного рендеринга, поэтому счетчик всегда будет отображаться.
Чтобы использовать этот компонент счетчика в App.vue
, примените свойство данных (первоначально установленное на true
), которое позже будет установлено на false
, когда приложение будет готово.
"loading"
) со значением по умолчанию true
.v-if = "loading"
на элементе счетчика в шаблоне и v-else
на содержимом.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>