Dropdown 下拉菜单

悬浮下拉菜单控件，支持自定义触发器、多方向定位 (bottom-left | bottom-right | top-left | top-right)、分割线、危险操作红字与暗黑模式。

---

代码示例

1. 微信同款右上角加号菜单 (Bottom Right)

<template>
  <mu-dropdown :items="wechatItems" placement="bottom-right" width="300rpx" @click="onSelect">
    <view class="icon-btn">
      <mu-icon name="plus" :size="20" color="#171717" />
    </view>
  </mu-dropdown>
</template>

<script setup>
import { ref } from 'vue'

const wechatItems = ref([
  { text: '发起群聊', icon: 'users' },
  { text: '添加朋友', icon: 'user-plus' },
  { text: '扫一扫', icon: 'maximize', divider: true },
  { text: '收付款', icon: 'credit-card', danger: true }
])

const onSelect = ({ item }) => {
  console.log('选中菜单:', item.text)
}
</script>

---

2. 向上弹出菜单 (Top Placement)

<template>
  <mu-dropdown :items="menuItems" placement="top-left" @click="onSelect">
    <mu-button type="info" plain radius="full">向上展开 ▴</mu-button>
  </mu-dropdown>
</template>

<script setup>
import { ref } from 'vue'

const menuItems = ref([
  { text: '编辑项目', icon: 'edit' },
  { text: '复制链接', icon: 'copy' },
  { text: '删除记录', icon: 'trash-2', danger: true }
])
</script>

---

API 属性说明 (Props)

参数名	说明	类型	可选值	默认值
items	下拉菜单列表集合 [{ text, icon, color, danger, divider, disabled }]	Array	-	[]
placement	菜单悬浮弹出定位	String	bottom-left | bottom-right | top-left | top-right	'bottom-left'
width	下拉面板宽度	String	-	'280rpx'

---

菜单项数据结构 (Item Object)

字段名	说明	类型
text / label	菜单文字	String
icon	矢量图标名称	String
color	文字色彩	String
iconColor	图标色彩	String
danger	是否标红危险警示项	Boolean
divider	是否在下方展示分割线	Boolean
disabled	是否禁用不可点击	Boolean

---

事件说明 (Events)

事件名	说明	回调参数
click / select	点击菜单项时触发	({ index: Number, item: Object })
open	下拉面板展开时触发	-
close	下拉面板关闭时触发	-

---

插槽说明 (Slots)

插槽名	说明
default	触发下拉菜单展开的点击按键/宿主节点插槽

---

实例方法 (Expose Methods)

获取组件 ref 实例后可直接调用以下公开方法：

方法名	说明
toggle()	切换下拉菜单展开/收起状态
visible	当前菜单是否展开（只读 ref）