v3.17

useLoadingIndicator

Source
此可组合函数允许你访问应用页面的加载状态。

描述

¥Description

一个可组合项，用于返回页面的加载状态。由 <NuxtLoadingIndicator> 使用且可控。它连接到 page:loading:start 和 page:loading:end 以更改其状态。

¥A composable which returns the loading state of the page. Used by <NuxtLoadingIndicator> and controllable. It hooks into page:loading:start and page:loading:end to change its state.

参数

¥Parameters

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

属性

¥Properties

isLoading

  • 类型：Ref<boolean>
  • 说明：加载状态

error

  • 类型：Ref<boolean>
  • 说明：错误状态

progress

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

方法

¥Methods

start()

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

¥Set isLoading to true and start to increase the progress value. start accepts a { force: true } option to skip the interval and show the loading state immediately.

set()

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

¥Set the progress value to a specific value. set accepts a { force: true } option to skip the interval and show the loading state immediately.

finish()

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

¥Set the progress value to 100, stop all timers and intervals then reset the loading state 500 ms later. finish accepts a { force: true } option to skip the interval before the state is reset, and { error: true } to change the loading bar color and set the error property to true.

clear()

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

¥Used by finish(). Clear all timers and intervals used by the composable.

示例

¥Example

<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>