useLoadingIndicator

描述

一个返回页面加载状态的可组合函数。由 <NuxtLoadingIndicator> 使用并可控。它挂接到 page:loading:start 和 page:loading:end 以更改其状态。

参数

• duration：加载条的持续时间，以毫秒为单位（默认值为 2000）。
• throttle：以毫秒为单位限制显示和隐藏（默认值为 200）。
• estimatedProgress：默认情况下，Nuxt 会在接近 100% 时退避。您可以提供一个自定义函数来自定义进度估计，该函数接收加载条的持续时间（如上）和经过的时间。它应返回 0 到 100 之间的值。

属性

isLoading

• 类型：Ref<boolean>
• 描述：加载状态

error

• 类型：Ref<boolean>
• 描述：错误状态

progress

• 类型：Ref<number>
• 描述：进度状态。从 0 到 100。

方法

start()

将 isLoading 设置为 true 并开始增加 progress 值。

finish()

将 progress 值设置为 100，停止所有计时器和间隔，然后在 500 毫秒后重置加载状态。 finish 接受一个 { force: true } 选项以跳过重置状态之前的间隔，以及 { error: true } 以更改加载条颜色并将错误属性设置为 true。

clear()

由 finish() 使用。清除可组合函数使用的所有计时器和间隔。

示例

<script setup lang="ts">
  const { progress, isLoading, start, finish, clear } = useLoadingIndicator({
    duration: 2000,
    throttle: 200,
    // This is how progress is calculated by default
    estimatedProgress: (duration, elapsed) => (2 / Math.PI * 100) * Math.atan(elapsed / duration * 100 / 50)
  })
</script>