# 下拉菜单项

## 使用方法

`DropdownMenuItem` 是菜单里的一行，把「自己做一行」这件事变成写几个属性，样式自然和别的行一致。写在它上面的原生属性和 DOM 事件（`aria-`、`data-`、`id`、拖放相关）都会落到行的根元素，也就是带 `role="menuitem"` 的那个元素。

```ts
import { DropdownMenuItem } from '@astryx-vue/core/DropdownMenu'
```

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

<template>
  <DropdownMenu :button="{ label: '操作' }">
    <DropdownMenuItem description="重命名、移动或更换封面" label="编辑项目" />
    <DropdownMenuItem label="复制项目">
      <template #endContent>
        <Kbd keys="mod+d" />
      </template>
    </DropdownMenuItem>
    <DropdownMenuItem label="删除项目" variant="destructive" />
  </DropdownMenu>
</template>
```

## DropdownMenuItem 属性

| 属性 | 类型 | 默认值 | 说明 |
| --- | --- | --- | --- |
| `label` | `string \| number` | — | 行内的主要文字。需要富文本时改用 `label` 插槽。 |
| `description` | `string \| number` | — | 标签下方的次要说明文字。需要富文本时改用 `description` 插槽。 |
| `icon` | `string \| Component` | — | 标签前的图标：一个 CSS 图标类（例如 UnoCSS 的 `i-carbon-copy`，也可以是你自己的类名），或一个绘制 SVG 的组件。astryx-vue 不自带图标。想放任意内容时改用 `icon` 插槽。 |
| `isDisabled` | `boolean` | `false` | 禁用这一行。禁用的行会被方向键和字母跳转跳过，并且不响应点击。 |
| `variant` | `'default' \| 'destructive'` | `'default'` | 视觉变体。`destructive` 会把标签、说明和图标一起换成错误色，用于删除这类危险动作。悬停底色仍是共用的中性色，与其他行一致。 |
| `hasCloseOnSelect` | `boolean` | `true` | 激活这一行后是否收起菜单。像“复制”这种在行内回报结果的动作可以设为 `false`。 |
| `href` | `string` | — | 这一行要跳转的地址。给出后整行就是一个带 `role="menuitem"` 的链接，所以 ⌘/Ctrl 点击和中键点击仍然保持浏览器原本的含义。 |
| `target` | `'_blank' \| '_self'` | — | 链接的打开方式，仅在给出 `href` 时使用。 |
| `rel` | `string` | — | 链接关系，仅在给出 `href` 时使用。`target="_blank"` 时会自动加上 `noopener` 和 `noreferrer`。 |
| `onClick` | `(event: MouseEvent) => void` | — | 激活这一行时调用。链接行会在浏览器跳转前调用；带修饰键的点击交给浏览器处理，不调用它。 |

## 事件

| 名称 | 载荷 | 说明 |
| --- | --- | --- |
| `click` | `MouseEvent` | 激活这一行时触发，带回触发它的那次点击。`@click` 和 `onClick` 走的是同一个处理函数，所以同一行不会被执行两次。 |

## 插槽

- `icon`：任意前置内容，替代 `icon` 属性。
- `label`：替代 `label` 属性的富文本。
- `description`：替代 `description` 属性的富文本。
- `endContent`：行尾内容，例如一个提示快捷键的 `Kbd`。

## 原生属性

行的根元素就是带 `role="menuitem"` 的那个元素：给出 `href` 时是一个 `<a>`，否则是 `Item` 的根。属性和 DOM 事件都会落到它上面，所以 `id`、`data-*`、`aria-*` 以及拖放相关的处理函数都写在行上。`class` 和 `style` 也落到这个根元素，示例里就是靠它把某一行画成高亮状态。

行高跟着菜单的 `size` 走，不用额外传属性就能和触发按钮对齐。