Vuetify 加载器组件，直到页面完全加载

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>

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