V-плащ Preloader не показывает загрузку текста

Question

У меня в css:

[v-cloak]::before { content: "loading…"; display: block; text-align: center; width: 300px; height: 600px; margin: 0 auto; font-size: 60px; }

При загрузке страницы я не получаю loading...Зачем?У меня белый фон .. Мне нужно сделать pre-loader v-cloak, показать пользователю, что страница загружается ..

Answer 1

Псевдоэлемент ::before вставляется как первый дочерний элемент элемента [v-cloak], который скрыт .

Исправление будет состоять в том, чтобы создать смежный элемент для индикатора загрузки и применить там предназначенный CSS:

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

<style>
[v-cloak] + .loader::before {
  /* ... */
}
</style>

setTimeout(() => new Vue({ el: '#app' }), 1500)

[v-cloak] {
  display: none;
}

[v-cloak] + #loader::before {
  content: "loading…";
  display: block;
  text-align: center;
  width: 300px;
  height: 600px;
  margin: 0 auto;
  font-size: 60px;
}

<script src="https://unpkg.com/vue@2.6.3/dist/vue.min.js"></script>

<div id="app" v-cloak>
  <p>Hello Vue.js!</p>
</div>
<div id="loader"></div>

Answer 2

Попробуйте на примере из документации:

CSS:
[v-cloak] { display: none; }

.vue:
<div v-cloak> Loading... </div>