验证加载程序组件，直到页面完全加载完毕

Question

是否有一种方法可以显示Vuetify加载器组件，直到所有元素都加载完毕？如果不是，它会暂时显示{{和}}，而且不是很美观。

我有一个很大的页面，有很多物品，在每个物品上都应用v-cloak也不觉得很酷，我更喜欢显示一个加载程序。

Answer 1

Vuetify overlay component在这种情况下不是一个不错的选择。您可以选择带有不确定的加载程序的不透明叠加层，然后在加载完所有内容后将其隐藏：

<template>
  <div>
    <div id="the-content">
      This is the stuff that gets hidden until it's loaded...
    </div>
    <v-overlay
      :opacity="1"
      :value="overlay"
    >
      <v-progress-circular indeterminate size="64">
        Loading...
      </v-progress-circular>
    </v-overlay>
  </div>
</template>

<script>
  export default {
    data: () => ({
      overlay: true,
    }),
    mounted() {
      // hide the overlay when everything has loaded
      // you could choose some other event, e.g. if you're loading
      // data asynchronously, you could wait until that process returns
      this.overlay = false
    }, 
  }
</script>

注意：在此示例中，您不太可能看到加载叠加层，因为此页面上的内容实际需要很短的时间加载。