useRouteAnnouncer
이 컴포저블은 페이지 제목의 변화를 관찰하고 이에 따라 알림 메시지를 업데이트합니다.
이 컴포저블은 Nuxt v3.12+에서 사용할 수 있습니다.
설명
페이지 제목의 변화를 관찰하고 이에 따라 알림 메시지를 업데이트하는 컴포저블입니다. <NuxtRouteAnnouncer>에서 사용되며 제어가 가능합니다.
Unhead의 dom:rendered에 후킹하여 페이지의 제목을 읽고 이를 알림 메시지로 설정합니다.
파라미터
politeness: 스크린 리더 알림의 긴급도를 설정합니다:off(알림 비활성화),polite(조용해질 때까지 대기), 또는assertive(즉시 중단). (기본값polite).
속성
message
- type:
Ref<string> - description: 알릴 메시지
politeness
- type:
Ref<string> - description: 스크린 리더 알림의 긴급도 수준
off,polite, 또는assertive
메서드
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>