<NuxtAnnouncer>

源代码
<NuxtAnnouncer> 组件添加一个隐藏元素，用于向辅助技术宣布动态内容的变化。
该组件在 Nuxt v3.17+ 中可用。

使用方法

在你的 app.vue 或 app/layouts/ 中添加 <NuxtAnnouncer/>，以启用向屏幕阅读器宣布动态内容更改。这对于表单验证、吐司通知、加载状态和其他页面内更新非常有用。

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>

插槽

你可以通过 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 默认值falsetrue
此组件为可选。
若需完全自定义，你可以基于其源码自行实现。
你可以通过使用 useAnnouncer 组合式函数挂载到底层的 announcer 实例，从而设置自定义的宣布消息。