ContextMenu
Меню дій у координатах pointer із підтримкою Shift+F10 та клавіші Context Menu.
Приклад
Остання дія: Ще не обрано
API
Props
| Назва | Тип | Типово | Опис |
|---|---|---|---|
width | string | "14rem" | Ширина меню, будь-яка CSS-величина. |
ariaLabel | string | "Контекстне меню" | Доступна назва меню. |
targetSelector | string | undefined | Делегування для довгих списків: `targetAttrs` віддають контейнеру списку, а меню відкривається для найближчого до події елемента за цим CSS-селектором (рядка). Один екземпляр меню на весь список замість меню в кожному рядку. Події поза такими елементами меню не відкривають. Елемент, для якого відкрили меню, — `target` у слоті `content` і в події `open`; йому ж повертається фокус. Позначте рядки самі (`aria-haspopup="menu"`, `tabindex`): контейнер aria-атрибутів меню не отримує. |
modelValue | boolean | false | Відкрито. Використовуйте через `v-model`. |
disabled | boolean | false | — |
haptic | boolean | false | Короткий тактильний відгук, коли меню відкрило довге натискання пальцем, — як у нативних застосунках (Android; iOS вібрації не має). Правий клік мишею і клавіатура відгуку не дають. |
Події
| Назва | Payload | Опис |
|---|---|---|
update:modelValue | [value: boolean] | Меню відкрито або закрито. |
open | [target: HTMLElement] | Меню відкрилося. Аргумент — елемент, для якого його відкрили (з `targetSelector` — рядок списку). |
close | [] | Меню закрилося. |
Слоти
| Назва | Опис |
|---|---|
default | Область, для якої відкривається меню. Передайте `targetAttrs` реальному елементу: у них права кнопка, Shift+F10 і довге натискання пальцем. |
content | Пункти з `role="menuitem"`. `target` — елемент, для якого відкрили меню (з `targetSelector` — рядок списку). |
Доступно через ref
| Назва | Тип | Опис |
|---|---|---|
show | (x: number, y: number, source?: HTMLElement) => Promise<void> | — |
close | (restoreFocus?: boolean) => void | — |
Коли використовувати
Для другорядних дій над файлом, вузлом дерева, рядком таблиці або полотном.
targetAttrs мають бути на реальному фокусованому target, щоб клавіатурний
виклик працював поруч із ним.
Коли НЕ використовувати
Не ховайте тут єдиний шлях до важливої дії. Context menu доповнює видимі
кнопки або UiMenu, а не замінює їх.
Довгі списки: одне меню на список
Меню в кожному рядку — це екземпляр компонента, обробники й Teleport на
рядок. У переписці чи списку чатів на сотню рядків воно коштує більше, ніж
самі рядки. Для таких списків передайте targetAttrs контейнеру, а
рядки позначте селектором targetSelector: меню відкривається для
найближчого до події рядка, а сам рядок приходить у слот content як
target і в подію open. Права кнопка, Shift+F10 на сфокусованому рядку й
довге натискання працюють так само; подія повз рядки меню не відкриває й
системного меню не гасить.
Остання дія: Ще не обрано
Контейнер aria-атрибутів меню не отримує — позначте рядки самі:
aria-haspopup="menu" і tabindex="0", щоб Shift+F10 і повернення фокуса
після закриття працювали з клавіатури. Фокус після закриття повертається на
рядок, для якого меню відкрили.
Доступність
Shift+F10 та клавіша Context Menu відкривають меню без миші. ArrowUp,
ArrowDown, Home і End переміщують фокус між доступними menuitem, друк
літери — на пункт, що з неї починається. Escape закриває й повертає фокус на
target, Tab закриває й веде до елемента після target.
Дотик
Довге натискання пальцем чи пером (600 мс) відкриває меню в точці дотику.
iOS Safari на довге натискання не шле contextmenu, тож без власного
таймера меню на iPhone та iPad не відкривалося взагалі. Рух пальця далі за
10 px — це прокрутка, і таймер скасовується. Click, яким браузер може
догнати відпускання пальця, гаситься — інакше довге натискання спрацювало б
ще й як звичайне по першому пункту під пальцем.
targetAttrs додають target -webkit-touch-callout: none, щоб iOS не
показував поверх меню власну виноску «Копіювати/Поділитися».
haptic додає короткий тактильний відгук, коли меню відкрило саме довге
натискання, — як у нативних застосунках. Працює там, де є Vibration API
(Android); iOS Safari вібрації не має, і меню там відкривається мовчки.
Правий клік мишею й клавіатура відгуку не дають.