通过 100 多个技巧学习 Nuxt!

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"

示例

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