useLoadingIndicator

源文件
这个组合式函数让你能够访问应用页面的加载状态。

描述

一个返回页面加载状态的组合式函数。由 <NuxtLoadingIndicator> 使用且可控制。它通过钩入 page:loading:start 和 page:loading:end 来改变其状态。

参数

  • duration：加载条的持续时间，以毫秒为单位（默认为 2000）。
  • throttle：节流显示和隐藏的时间，以毫秒为单位（默认为 200）。
  • estimatedProgress：默认情况下，当接近 100% 时，Nuxt 会放慢进度。你可以提供一个自定义函数来自定义进度估计，该函数接收加载条的持续时间（见上文）和已过去的时间作为参数。它应该返回一个 0 到 100 之间的值。

属性

isLoading

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

error

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

progress

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

方法

start()

将 isLoading 设置为 true 并开始增加 progress 值。start 接受一个 { force: true } 选项，用于跳过时间间隔并立即显示加载状态。

set()

将 progress 值设置为特定值。set 接受一个 { force: true } 选项，用于跳过时间间隔并立即显示加载状态。

finish()

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

<script setup lang="ts">
const { start, set } = useLoadingIndicator()
// same as set(0, { force: true })
// set the progress to 0, and show loading immediately
start({ force: true })
</script>