Dropdown Menu - 下拉菜单

Demo

更新日期

2026-09-25 UTC

dropdown-menu/demo.vue

最近选择：（无）

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

const last = ref('')
const items = [
  { label: '个人资料', value: 'profile' },
  { label: '云币钱包', value: 'wallet' },
  { label: '偏好设置', value: 'settings' },
  { separator: true },
  { label: '退出登录', value: 'logout' },
]
</script>

<template>
  <div class="flex flex-col gap-3">
    <YlfDropdownMenu :items="items" @select="last = $event">
      <template #trigger>
        <YlfButton variant="secondary">
          菜单 ▾
        </YlfButton>
      </template>
    </YlfDropdownMenu>
    <p class="text-sm op-70">
      最近选择：{{ last || '（无）' }}
    </p>
  </div>
</template>

下拉菜单：定位、键盘导航（方向键 / Home / End / 首字母）、焦点管理基于 reka-ui，外观走 token。

Props

属性	说明	类型	默认值
items	菜单项	MenuItem[]	—

MenuItem

字段	说明	类型
label	文案	string
value	选中值	string
disabled	禁用	boolean?
separator	渲染为分隔线	boolean?

Events

名称	说明
select	选中某项时触发，回传 value