<NuxtAnnouncer>

源文件
<NuxtAnnouncer> 组件添加了一个隐藏元素，用于向辅助技术通报动态内容的变化。
此组件适用于 Nuxt v3.17+。

使用

在你的 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('Message sent successfully')
  } catch (error) {
    assertive('Error: Failed to send message')
  }
}
</script>

插槽

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

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

属性

  • atomic：控制屏幕阅读器是仅通报变化内容还是通报全部内容。设置为 true 时，更新时会读出全部内容；设置为 false 时，仅读出变化部分。（默认 true）
  • politeness：设置屏幕阅读器通告的默认紧急程度：off（禁用通告）、polite（等待静默后通告）或 assertive（立即打断通告）。（默认 polite）

与 <NuxtRouteAnnouncer> 的区别

方面<NuxtRouteAnnouncer><NuxtAnnouncer>
目的通报路由/页面变更通报任何动态内容
触发器导航时自动触发通过 polite()/assertive() 手动触发
消息来源页面 <title>开发者提供
默认 atomic 属性falsetrue
此组件是可选的。
若要实现完全自定义，你可以基于它的源代码.
你可以使用 useAnnouncer 组合式函数 来连接到底层的 announcer 实例，这允许你设置自定义的通告消息。