加载指示器 <NuxtLoadingIndicator>

组件在页面导航上显示一个进度条。

示例

基础用法

Add <NuxtLoadingIndicator/> in your app.vue or layouts.

app.vue
vue
<template>
  <NuxtLayout>
    <NuxtLoadingIndicator /> <!-- here -->
    <NuxtPage />
  </NuxtLayout>
</template>
案例演示：stackblitz中试炼

如果您正在更改布局和页面，您在此处设置的页面转换将不会运行。 相反，您应该设置布局转换。

Slots

您可以通过加载指示器的默认插槽传递自定义 HTML 或组件。

Props

  • color：加载栏的颜色。 它可以设置为“false”以关闭显式颜色样式。
  • height：加载栏的高度，以像素为单位(默认为“3”)。
  • duration：加载栏的持续时间，以毫秒为单位(默认为“2000”)。
  • throttle：限制显示和隐藏，以毫秒为单位(默认为 200)。

这个组件是完全可选的。 要实现完全自定义，您可以基于此文件。