DropdownMenu 下拉菜单

基于 Popover 的下拉菜单（Windows 风格）。

基础用法

DropdownMenu

示例即将加载...

<template>
  <TxDropdownMenu>
    <template #trigger>
      <TxButton>Menu</TxButton>
    </template>

    <TxDropdownItem>Open</TxDropdownItem>
    <TxDropdownItem danger>Delete</TxDropdownItem>
  </TxDropdownMenu>
</template>

导航样式

DropdownMenu (nav)

示例即将加载...

<script setup lang="ts">
import { ref } from 'vue'

const open = ref(false)
</script>

<template>
  <div style="display: flex; align-items: center; gap: 10px;">
    <TxDropdownMenu v-model="open" :min-width="240" placement="bottom-start" :panel-padding="8">
      <template #trigger>
        <div
          style="display: inline-flex; align-items: center; gap: 10px; padding: 8px 12px; border: 1px solid var(--tx-border-color); border-radius: 12px; user-select: none; cursor: pointer;"
        >
          <div style="font-weight: 600;">
            设计
          </div>
          <div style="color: var(--tx-text-color-secondary); font-weight: 600;">
            生态
          </div>
          <TxIcon name="chevron-down" style="opacity: 0.65;" />
        </div>
      </template>

      <TxDropdownItem arrow>
        GitHub
        <template #right>
          <span style="opacity: 0.72; display: inline-flex; align-items: center;">
            <i class="i-ri-external-link-line" style="font-size: 16px;" />
          </span>
        </template>
      </TxDropdownItem>
      <TxDropdownItem arrow>
        NPM
        <template #right>
          <span style="opacity: 0.72; display: inline-flex; align-items: center;">
            <i class="i-ri-external-link-line" style="font-size: 16px;" />
          </span>
        </template>
      </TxDropdownItem>
    </TxDropdownMenu>
  </div>
</template>

API

TxDropdownMenu Props

属性名	类型	默认值	说明
`modelValue`	`boolean`	`false`	是否打开（v-model）
`placement`	`DropdownPlacement`	`'bottom-start'`	位置
`offset`	`number`	`6`	间距
`closeOnSelect`	`boolean`	`true`	选择后自动关闭
`minWidth`	`number`	`220`	最小宽度
`panelVariant`	`'solid' \| 'dashed' \| 'plain'`	`'solid'`	面板边框形态（TxCard variant）
`panelBackground`	`'blur' \| 'glass' \| 'mask'`	`'glass'`	面板背景（TxCard background）
`panelShadow`	`'none' \| 'soft' \| 'medium'`	`'soft'`	面板阴影（TxCard shadow）
`panelRadius`	`number`	`18`	面板圆角（TxCard radius）
`panelPadding`	`number`	`8`	面板 padding（TxCard padding）

TxDropdownItem Props

属性名	类型	默认值	说明
`disabled`	`boolean`	`false`	禁用
`danger`	`boolean`	`false`	危险样式
`arrow`	`boolean`	`false`	显示右侧箭头（可通过 `#right` 覆盖）

Events

事件名	参数	说明
`select`	-	点击菜单项时触发