javascript - 预加载器 v-cloak 不显示文本加载

Question

我有CSS:

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

页面加载时，我没有正在加载..。为什么？我得到白色背景..我需要预加载 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>