Skip to content

useKeyboardHint

@astryxdesign/core v0.7.1 · useKeyboardHint

参数 ​

名称类型默认值说明
optionsUseKeyboardHintOptions{}提示的配置对象,可以不传。
options.orientation'horizontal' | 'vertical' | 'both''horizontal'这一组控件用哪个方向键导航,决定提示里画哪几个箭头(横向 ← →,纵向 ↑ ↓,双向四个都画)。
options.dismissAfterMsnumber3000出现之后过多少毫秒自己消失。
options.isEnabledbooleantrue是否启用提示。某处不想提示时(例如控件被禁用或只读)设为 false。

返回值 ​

名称类型说明
HintComponent提示元素本身,渲染在这一组容器的最后,例如 <component :is="hint.Hint" />。它自己用 fixed 定位、用 Kbd 画方向键、自己管显示与隐藏。无条件渲染即可。
visibleRef<boolean>提示当前是否显示。Hint 读的就是它;自己画提示时也可以用。
anchorRef<HTMLElement | null>提示跟在哪个元素旁边,也就是当前聚焦的那一项。第一次出现之前是 null。
orientationComputedRef<KeyboardHintOrientation>补过默认值的方向。
onFocus(event: FocusEvent) => void绑在容器的 focusin 上(@focusin),因为 focus 不冒泡。第一次从组外靠键盘(:focus-visible)进入时显示提示。
onBlur(event: FocusEvent) => void绑在容器的 focusout 上(@focusout)。焦点彻底离开这一组时藏起提示,并算作这次提示已经用完,这个实例不会再提示;焦点在组内移动时只把提示挪到新的当前项。
onKeyDown(event: KeyboardEvent) => void绑在容器的 keydown 上。第一次按方向键时收起提示(用户已经发现这个交互了)。它不会 preventDefault,也不会停止传播。