# 上下文菜单项

## 使用方法

复合模式下的菜单行组件。它从 `DropdownMenuItem` 重新导出，方便在 [上下文菜单](/components/context-menu) 的入口里直接找到。

```ts
import { ContextMenuItem } from '@astryx-vue/core/ContextMenu'
```

它是 [上下文菜单](/components/context-menu) 里的一行动作。菜单面板自己用手写的方式拼、也就是用 `content` 插槽而不是 `items` 数组时，就用这一行；两种写法画出来的行一样，样式不会跑偏。

## 示例

常见的用法和不同的状态。

### 基础

上下文菜单里的行，有名字也有次要说明。需要自己拼菜单行时用它，样式和其他行保持一致。

```vue
<script setup lang="ts">
import { ContextMenu, ContextMenuItem } from '@astryx-vue/core/ContextMenu'
</script>

<template>
  <div class="context-menu-item-preview">
    <ContextMenu label="File actions">
      <div class="context-menu-item-preview__trigger">
        Right-click this area
      </div>
      <template #content>
        <ContextMenuItem description="Modify this item" label="Edit" />
        <ContextMenuItem description="Create a copy" label="Duplicate" />
        <ContextMenuItem description="This action cannot be undone" label="Delete" />
      </template>
    </ContextMenu>
  </div>
</template>
```

## ContextMenuItem 属性

| 属性 | 类型 | 默认值 | 说明 |
| --- | --- | --- | --- |
| `label` | `string \| number` | — | 行内的主要文字。需要富文本时改用 `label` 插槽。 |
| `description` | `string` | — | 标签下方的次要说明。需要富文本时改用 `description` 插槽。 |
| `icon` | `string \| Component` | — | 标签前的图标：一个 CSS 图标类，或一个绘制 SVG 的组件。想放任意内容时改用 `icon` 插槽。 |
| `endContent` | `string \| number` | — | 跟在标签后面的纯文字。徽章这类富文本用 `endContent` 插槽。 |
| `href` | `string` | — | 这一行要跳转的地址；给出后整行渲染成链接。 |
| `target` | `'_blank' \| '_self'` | — | 链接的打开方式，仅在给出 `href` 时使用。 |
| `rel` | `string` | — | 链接关系，仅在给出 `href` 时使用。 |
| `isDisabled` | `boolean` | `false` | 是否禁用这一行。禁用的行会变淡，方向键和首字母查找都会跳过它，也不能被激活。 |
| `hasCloseOnSelect` | `boolean` | `true` | 激活这一行后是否收起菜单。 |
| `variant` | `'default' \| 'destructive'` | `'default'` | 这一行的视觉变体。 |

## 事件

| 名称 | 载荷 | 说明 |
| --- | --- | --- |
| `click` | `MouseEvent` | 激活这一行时触发，带回触发它的那次点击。 |

## 插槽

- `label`：替代 `label` 属性的富文本。
- `icon`：任意前置内容，替代 `icon` 属性。
- `description`：替代 `description` 属性的富文本。
- `endContent`：标签后面的行尾内容。

这一行的角色是 `role="menuitem"`，键盘交给上层的菜单管：方向键、`Home`、`End` 和首字母查找都在行之间移动。