APopupMenu

APopupMenu is a lightweight context menu built on top of APopper. Items can be plain strings or { name, key } objects. It defaults to hover-trigger and emits command with the selected key.

Import

import { PopupMenu } from '@any-design/anyui/vue';
// React:  import { PopupMenu } from '@any-design/anyui/react';
// Svelte: import { PopupMenu } from '@any-design/anyui/svelte';

Basic usage

<template>
  <APopupMenu :items="items" @command="onCommand">
    <AButton>Options</AButton>
  </APopupMenu>
</template>

<script setup>
const items = ['Edit', 'Copy', 'Delete'];
const onCommand = (key) => console.log('selected:', key);
</script>

Examples

Right-click context menu

Set triggerType="contextmenu" to open on right-click.

<template>
  <APopupMenu :items="items" trigger-type="contextmenu">
    <div class="canvas">Right-click here</div>
  </APopupMenu>
</template>

<script setup>
const items = ['Rename', 'Duplicate', 'Remove'];
</script>

Object items with keys

Pass { name, key } objects when you need a key distinct from the label.

<template>
  <APopupMenu :items="items" @command="onCommand">
    <AClickableText type="primary">Menu</AClickableText>
  </APopupMenu>
</template>

<script setup>
const items = [
  { name: 'New file', key: 'new' },
  { name: 'New folder', key: 'folder' },
];
const onCommand = (key) => console.log(key);
</script>

Props

Prop	Type	Default	Description
items	Array<string | { name, key? }>	[]	Items (plain strings allowed).
placement	Placement	‘bottom’	Popper placement.
triggerType	‘hover’ | ‘click’ | ‘contextmenu’ | ‘manual’	‘hover’	Trigger type.
offset	Number	12	Offset (px).
width	Number	180	Menu width.
hideDelay	Number	100	Hide delay (ms).
hideAfterClick	Boolean	false	Hide after click.
zIndex	Number	3000	z-index.
appendToBody	Boolean	true	Append to body.
transition	String	‘a-trans-popmenu’	Transition name.
popupClass / menuClass	String	undefined	Class hooks.
group	String	‘’	Shared popper group.

Events

Event	Payload	Description
command	(key, { triggerEl, popupEl })	Item clicked.

Slots

Slot	Props	Description
default	—	Trigger element.

APopupMenu

APopupMenu 是基于 APopper 的轻量右键菜单。选项可以是纯字符串或 { name, key } 对象。默认 hover 触发，通过 command 事件返回已选 key。

引入

import { PopupMenu } from '@any-design/anyui/vue';
// React:  import { PopupMenu } from '@any-design/anyui/react';
// Svelte: import { PopupMenu } from '@any-design/anyui/svelte';

基础用法

<template>
  <APopupMenu :items="items" @command="onCommand">
    <AButton>选项</AButton>
  </APopupMenu>
</template>

<script setup>
const items = ['编辑', '复制', '删除'];
const onCommand = (key) => console.log('已选：', key);
</script>

示例

右键上下文菜单

设置 triggerType="contextmenu" 改为右键打开。

<template>
  <APopupMenu :items="items" trigger-type="contextmenu">
    <div class="canvas">在此右键</div>
  </APopupMenu>
</template>

<script setup>
const items = ['重命名', '复制副本', '移除'];
</script>

带 key 的对象项

当 key 需要与标签不同时，传入 { name, key } 对象。

<template>
  <APopupMenu :items="items" @command="onCommand">
    <AClickableText type="primary">菜单</AClickableText>
  </APopupMenu>
</template>

<script setup>
const items = [
  { name: '新建文件', key: 'new' },
  { name: '新建文件夹', key: 'folder' },
];
const onCommand = (key) => console.log(key);
</script>

属性

属性	类型	默认值	说明
items	Array<string | { name, key? }>	[]	菜单项（支持纯字符串）。
placement	Placement	‘bottom’	Popper 位置。
triggerType	‘hover’ | ‘click’ | ‘contextmenu’ | ‘manual’	‘hover’	触发方式。
offset	Number	12	偏移（px）。
width	Number	180	菜单宽度。
hideDelay	Number	100	隐藏延迟（ms）。
hideAfterClick	Boolean	false	点击后隐藏。
zIndex	Number	3000	z-index。
appendToBody	Boolean	true	挂载到 body。
transition	String	‘a-trans-popmenu’	过渡名。
popupClass / menuClass	String	undefined	类名钩子。
group	String	‘’	共享 popper 分组。

事件

事件	载荷	说明
command	(key, { triggerEl, popupEl })	点击菜单项。

插槽

插槽	作用域参数	说明
default	—	触发元素。