useRouteAnnouncer
此组合式函数用于观察页面标题的变化,并相应地更新播报信息。
此组合式函数适用于 Nuxt v3.12+ 版本。
描述
一个用于观察页面标题变化并相应更新播报信息的组合式函数。它被 <NuxtRouteAnnouncer> 组件使用且可被控制。它挂载到 Unhead 的 dom:rendered 钩子上,以读取页面标题并将其设置为播报信息。
参数
politeness:设置屏幕阅读器播报的紧急程度:off(禁用播报),polite(等待静默后播报),或assertive(立即打断播报)。(默认为polite)。
属性
message
- 类型:
Ref<string> - 描述:要播报的信息
politeness
- 类型:
Ref<string> - 描述:屏幕阅读器播报的紧急程度级别:
off、polite或assertive
方法
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。