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值。start接受一个{ force: true }选项以跳过间隔并立即显示加载状态。

set()

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

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,
    // 这是默认的进度计算方式
    estimatedProgress: (duration, elapsed) => (2 / Math.PI * 100) * Math.atan(elapsed / duration * 100 / 50)
  })
</script>

<script setup lang="ts">
  const { start, set } = useLoadingIndicator()
  // 等同于 set(0, { force: true })
  // 将进度设置为0，并立即显示加载状态
  start({ force: true })
</script>