时间戳

首页 > 解决方案 > 仅在 NProgress.done() 之后如何在 Vue 组件中显示元素

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

问题描述

为了在 VueJS 应用程序中显示加载状态，我使用了 library 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()”部分是我不知道如何解决的。

标签： javascripthtmlvue.js

解决方案

查看 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)。

推荐阅读