Skip to content

useMenuPress

@astryxdesign/core v0.7.1 · useMenuPress

参数 ​

名称类型默认值说明
optionsMenuPressOptions—配置对象。必填。
options.menuRefRef<HTMLElement | null>—带 role="menu" 的菜单根,也就是按压要从哪些行里挑的表面。必填。
options.isEnabledMaybeRefOrGetter<boolean>true这套按压模型当前是否生效,每次按下时读。传菜单的打开状态即可。
options.onDismiss() => void—鼠标在菜单外松开、且什么都没执行时调用:关闭菜单。手指在菜单外松开则让菜单继续开着,那种情况不会调用它。
options.itemSelectorstring可用的 [role="menuitem"]、menuitemradio、menuitemcheckbox只匹配可用行的选择器。指针压在菜单里别的东西上(分割线、标题、禁用行)就什么都不挑。挑出来的行仍然得落在 [role="menu"] 边界内。
options.triggerRefRef<HTMLElement | null>—打开菜单的那个控件:按压可以从它开始。
options.onTriggerPress(pointerType: MenuPressPointerType) => boolean—鼠标按下了触发器,或者手指在触发器上按满了 longPressDelayMs:在按住的指针下面打开菜单,并返回是否打开了。这一次按压其实是关掉已开的菜单时返回 false。
options.onHighlight(row: HTMLElement | null) => void—挪动高亮。不传就把 DOM 焦点用 preventScroll 挪到那一行。靠 aria-activedescendant 表示高亮的列表自己传。
options.onActivate(row: HTMLElement, release: PointerEvent) => void—执行松开时指针下面的那一行。不传就替它派发一次 click,带上松开时的按钮和修饰键。
options.getScroller() => HTMLElement | null溢出的菜单根按住时指针停在上下边缘 24 像素内要自动滚动的元素。返回 null 表示不滚。
options.hitTest(x: number, y: number) => Element | nulldocument.elementFromPoint按视口坐标找元素。手指的事件一直发给它落下的元素,所以靠坐标判断现在在哪一行。测试里用来替换。
options.longPressDelayMsnumber500手指在触发器上要按多久,菜单才在手指下面打开。

返回值 ​

名称类型说明
menuProps{ onPointerdown, 'data-astryx-menu-press': '' }摊到菜单根上(v-bind="press.menuProps")。接下从根内开始的按压,并在根上标记「这里用了这套按压模型」。
onPointerDown(event: PointerEvent) => void和 menuProps.onPointerdown 是同一个函数,单独拿出来。不好摊对象时直接绑到菜单根的 pointerdown 上。
triggerProps{ onPointerdown, onContextmenu }摊到触发器上:主键一按下就打开菜单;手指按满延时之后,手指还按着的时候打开。右键不碰,它自己的 contextmenu 照旧能用。contextmenu 那个只挡掉手指长按时浏览器自带的菜单,鼠标右键仍然交给应用。
isTriggerClickFromPress() => boolean到达触发器的这次 click 是不是就是刚按下它的那一次手势。那次按压已经开或关过菜单了,所以这次 click 不能再切换、也不能再打开。
cancel() => void结束正在进行的这次手势,什么都不执行。菜单在手势中途关掉时用。

模块还导出:

  • resetMenuPress():清掉已经布好的「吞掉多余 click」。表面在 hook 自己的拆卸之外被移除时调用它,测试里也用得上。
  • isMenuPressActivation():按压模型派发的那次行激活正在同步进行时为 true。把激活转交给里面链接的行用它分清这是模型的 click 还是浏览器多出来的那个。
  • MENU_PRESS_MARKER:菜单根上的标记属性名。
  • menuPressStep、MENU_PRESS_SETTLE_MS 和相关类型:不碰 DOM 的纯状态机。打开菜单的那次按压,只有指针进过菜单、或者按满 300 毫秒,松开时才执行下面那一行;否则菜单留着、什么都不执行。