<NuxtAnnouncer>

<NuxtAnnouncer> 组件添加一个隐藏元素，用于向辅助技术播报动态内容变化。

该组件在 Nuxt v4.4.2+ 中可用。 :

用法

在你的 app.vue 或 app/layouts/ 中添加 <NuxtAnnouncer/>，以便向屏幕阅读器播报动态内容的变化。这对表单校验、toast 通知、加载状态以及其他页内更新很有用。

app/app.vue

<template>
  <NuxtAnnouncer />
  <NuxtRouteAnnouncer />
  <NuxtLayout>
    <NuxtPage />
  </NuxtLayout>
</template>

然后可以在应用中的任何位置使用 useAnnouncer 组合式函数来播报消息：

app/pages/contact.vue

<script setup lang="ts">
const { polite, assertive } = useAnnouncer()

async function submitForm () {
  try {
    await $fetch('/api/contact', { method: 'POST', body: formData })
    polite('消息发送成功')
  } catch (error) {
    assertive('错误：发送消息失败')
  }
}
</script>

Slots

你可以通过 announcer 的默认插槽传入自定义 HTML 或组件。

<template>
  <NuxtAnnouncer>
    <template #default="{ message }">
      <p>{{ message }}</p>
    </template>
  </NuxtAnnouncer>
</template>

Props

atomic：控制屏幕阅读器是仅播报变化还是播报整个内容。设为 true 以在更新时完整读出内容，false 则仅播报变化。（默认值 true）
politeness：设置屏幕阅读器播报的默认紧急程度：off（禁用播报）、polite（等待静默后播报）、或 assertive（立即打断播报）。（默认值 polite）

与 `<NuxtRouteAnnouncer>` 的区别

方面	`<NuxtRouteAnnouncer>`	`<NuxtAnnouncer>`
用途	播报路由/页面变化	播报任意动态内容
触发方式	导航时自动触发	通过 `polite()`/`assertive()` 手动触发
消息来源	页面 `<title>`	开发者提供
atomic 默认值	`false`	`true`

该组件是可选的。:br 要实现完全自定义，你可以基于其源码实现你自己的版本。 :

你可以使用 the useAnnouncer 组合式函数钩入底层的 announcer 实例，它允许你设置自定义的播报消息。 :

<NuxtAnnouncer>

用法

Slots

Props

与 <NuxtRouteAnnouncer> 的区别

与 `<NuxtRouteAnnouncer>` 的区别