Vitral 0.2
Menu

ContextMenu

O menu que um clique com o botão direito ou a tecla de menu de contexto abre, no ponteiro ou sob o elemento focado, com submenus.

Testado com WAI-ARIA

Importação

main.ts
import { ContextMenu } from '@vitral/vue';

Sobre um elemento

report.pdf
Right-click it, or focus it and press Shift+F10. Last command: —
<script setup lang="ts">import { ContextMenu, type MenuItem } from '@vitral/vue';import { ref } from 'vue'; const last = ref('—');const run = ({ item }: { item: MenuItem }) => (last.value = item.label ?? '');const items: MenuItem[] = [    { label: 'Open', icon: 'folderOpen', command: run },    { label: 'Rename', icon: 'pencil', command: run },    { label: 'Share', icon: 'externalLink', items: [{ label: 'Email', command: run }, { label: 'Copy link', icon: 'copy', command: run }] },    { separator: true },    { label: 'Delete', icon: 'trash', command: run }];</script> <template>    <div        id="ctx-target"        tabindex="0"        style="padding: 2rem; text-align: center; border: 1px dashed var(--vt-content-border-color); border-radius: 8px"        aria-describedby="ctx-hint"    >        report.pdf    </div>    <small id="ctx-hint" style="color: var(--vt-text-muted-color)">Right-click it, or focus it and press Shift+F10. Last command: {{ last }}</small>    <ContextMenu :model="items" target="#ctx-target" aria-label="File actions" /></template>

API

Lido de packages/vue/src/components/ContextMenu/types.ts, então diz o que o componente aceita de fato.

Props

NomeTipoDescrição
modelMenuItem[]Os itens; os `items` de um item abrem como submenu ao lado dele.
globalbooleanAbre com um clique direito (ou Shift+F10) em qualquer lugar da página.
targetstring | HTMLElement | nullAbre com um clique direito, Shift+F10 ou a tecla de menu de contexto neste elemento, ou no elemento que um seletor encontrar.
appendTostringOnde é renderizado: `'body'` (o padrão) ou um seletor.
ariaLabelstringDá nome ao menu.

Mais pt, dt e unstyled de BaseProps; veja pass-through e modo sem estilo.

Emits

EventoPayloadDescrição
show——
hide——

Slots

NomeProps do slotDescrição
item(props: NestedMenuItemSlotProps)O conteúdo de um item. O elemento menuitem em volta, com seu papel e teclado, permanece.