useMenuPress
@astryxdesign/core v0.7.1 · useMenuPress
参数
| 名称 | 类型 | 默认值 | 说明 |
|---|---|---|---|
options | MenuPressOptions | — | 配置对象。必填。 |
options.menuRef | Ref<HTMLElement | null> | — | 带 role="menu" 的菜单根,也就是按压要从哪些行里挑的表面。必填。 |
options.isEnabled | MaybeRefOrGetter<boolean> | true | 这套按压模型当前是否生效,每次按下时读。传菜单的打开状态即可。 |
options.onDismiss | () => void | — | 鼠标在菜单外松开、且什么都没执行时调用:关闭菜单。手指在菜单外松开则让菜单继续开着,那种情况不会调用它。 |
options.itemSelector | string | 可用的 [role="menuitem"]、menuitemradio、menuitemcheckbox | 只匹配可用行的选择器。指针压在菜单里别的东西上(分割线、标题、禁用行)就什么都不挑。挑出来的行仍然得落在 [role="menu"] 边界内。 |
options.triggerRef | Ref<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 | null | document.elementFromPoint | 按视口坐标找元素。手指的事件一直发给它落下的元素,所以靠坐标判断现在在哪一行。测试里用来替换。 |
options.longPressDelayMs | number | 500 | 手指在触发器上要按多久,菜单才在手指下面打开。 |
返回值
| 名称 | 类型 | 说明 |
|---|---|---|
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 毫秒,松开时才执行下面那一行;否则菜单留着、什么都不执行。