跳到主要内容

useRouteAnnouncer

该组合式函数监视页面标题变化,并相应地更新播报消息。

该组合式函数在 Nuxt v3.12+ 中可用。 :

描述

一个监视页面标题变化并相应地更新播报消息的组合式函数。被 <NuxtRouteAnnouncer> 使用且可受控。 它钩入 Unhead 的 dom:rendered 钩子来读取页面标题并将其设为播报消息。

参数

  • politeness:设置屏幕阅读器播报的紧急程度:off(禁用播报)、polite(等待静默后播报)、或 assertive(立即打断播报)。(默认 polite

属性

message

  • 类型Ref<string>
  • 描述:要播报的消息

politeness

  • 类型Ref<string>
  • 描述:屏幕阅读器播报紧急程度 offpoliteassertive

方法

set(message, politeness = "polite")

设置要播报的消息及其紧急程度。

polite(message)

politeness = "polite" 设置消息。

assertive(message)

politeness = "assertive" 设置消息。

示例

app/pages/index.vue
<script setup lang="ts">
const { message, politeness, set, polite, assertive } = useRouteAnnouncer({
  politeness: 'assertive',
})
</script>

对于页内动态内容变化(表单校验、toast、加载状态)的播报,请改用 useAnnouncer。 :