Vue Preloader Epic Spinner и контент загружаются одновременно (Vuejs)

я хочу сначала загрузить предварительный загрузчик перед отображением контента, однако, когда я устанавливаю библиотеку 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>
Почему в Python есть оператор &quot;pass&quot;?
Почему в Python есть оператор "pass"?
Оператор pass в Python - это простая концепция, которую могут быстро освоить даже новички без опыта программирования.
Коллекции в Laravel более простым способом
Коллекции в Laravel более простым способом
Привет, читатели, сегодня мы узнаем о коллекциях. В Laravel коллекции - это способ манипулировать массивами и играть с массивами данных. Благодаря...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
Массив зависимостей в React
Массив зависимостей в React
Все о массиве Dependency и его связи с useEffect.
Toor - Ангулярный шаблон для бронирования путешествий
Toor - Ангулярный шаблон для бронирования путешествий
Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...
0
0
656
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

В вашей демонстрации вообще нет условного рендеринга, поэтому счетчик всегда будет отображаться.

Чтобы использовать этот компонент счетчика в App.vue, примените свойство данных (первоначально установленное на true), которое позже будет установлено на false, когда приложение будет готово.

  1. Объявите свойство данных (с именем "loading") со значением по умолчанию true.
  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>

демо

Другие вопросы по теме