Vue. js: Как показать оператор загрузки вместо белой страницы перед загрузкой приложения - PullRequest
Новая
       18

Vue. js: Как показать оператор загрузки вместо белой страницы перед загрузкой приложения

0 голосов
/ 25 января 2020

Когда открывается новая страница Vue. js, на некоторое время появляется белая страница, пока не загрузится все приложение. Я много раз пытался поставить оператор загрузки первым традиционным способом, но проблема в том, что даже оператору загрузки нужно некоторое время для загрузки и отображения, чтобы заменить белую страницу. 

<div id="app">
    <template>
  <div id="app">
    <v-app>
      <navbar></navbar>

      <v-content class="mx-sm-12 mt-8 mx-1">
        <router-view />
      </v-content>
    </v-app>
  </div>
</template>

<script>
import navbar from "./components/navbar";

export default {
  components: {
    navbar
  }
}
</script>

Ответы [ 2 ]

1 голос
/ 27 января 2020

HTML

<div id="app" v-cloak></div>

CSS: Добавить следующий стиль в файл CSS

[v-cloak] > * { display:none } [v-cloak]::before { content: "Loading…" }

You можно использовать анимированный GIF вместо «загрузки» текста.

0 голосов
/ 27 января 2020

Ваш html будет загружен и отображен первым. загрузка должна быть в индексе. html.

После загрузки JS (Vue встроенный файл) он заменит <div id="app"></div> в вашем индексе. html.

Я решил эту загрузку, имея свой индекс. html вот так: 

<html>
<head>
   ...
</head>
<body>
<div id="app">
    <div id="loading__container">
       <div>some animation and text to indicate loading...</div>
    </div>
</div>
<style>
#loading__container {
    // animation style
}
</style>
<script type='text/javascript'>
    var loading = document. getElementById("loading__container")
    // ... do things with the loading container
</script>
</body>
</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...