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>
若要播报页面内动态内容的变化(如表单验证、提示消息、加载状态),请改用 useAnnouncer