仅在 NProgress.done() 之后如何在 Vue 组件中显示元素

Question

为了在 VueJS 应用程序中显示加载状态，我使用库NProgress 。 它运行良好，并显示了加载条和纺车。 然而，页面的 HTML 内容已经被渲染和显示。 我想在请求运行时隐藏页面的某些部分。

是否有可能以编程方式检查NProgress.done()并在调用后显示内容？

我想要这样的东西：

<template>
    <div>
        <NavBar />
        <div v-show="check here for NProgress.done()">
            <p>Here are all the nice things with placeholders for the data from the API.</p>
        </div>
    </div>
</template>

<script>
import NavBar from '@/components/NavBar';

export default {
    components: {
        NavBar
    }
}
</script>

“在此处检查 NProgress.done()”部分是我不知道如何解决的。

Answer 1

查看 NProgress 的文档，它看起来像公开了一个“.status”，它返回当前加载程序的值，但在加载程序未“启动”时返回一个“null”。

<template>
  <div>
    <div v-show="state.status == null">
      <p>
        Here are all the nice things with placeholders for the data from the
        API.
      </p>
    </div>
  </div>
</template>
<script>
import Vue from "vue";
import NProgress from "nprogress";
import "nprogress/nprogress.css";

const state = Vue.observable(NProgress);

export default {
  data: () => ({ state }),
  mounted: function () {
    NProgress.start(); // Start the bar loading
    setTimeout(() => { // Perform your async workloads
      NProgress.done(); // .done() to finish the loading
    }, 5000);
  },
};
</script>

你需要让 NProgress 反应，所以你可以只使用 Vue.observable(state)。