javascript - Preloader v-cloak不显示文本加载

我在CSS中：

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

页面加载时，我没有得到loading..。为什么？我得到白色背景。.我需要做预加载器v-斗篷，在用户上显示，该页面正在加载。

最佳答案

插入::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/[email protected]/dist/vue.min.js"></script>

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