DropdownTop 顶端下拉

从页面最顶端向下平滑滑出的全宽下拉筛选组件，常用于列表页顶部综合筛选、排序切换。

---

代码示例

<template>
  <mu-button type="primary" block @click="show = true">
    打开顶端下拉菜单筛选 ▾ (当前: {{ selectedValue }})
  </mu-button>

  <mu-dropdown-top
    v-model:show="show"
    v-model:value="selectedValue"
    :items="filterItems"
    @select="onSelect"
  />
</template>

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

const show = ref(false)
const selectedValue = ref('all')
const filterItems = ref([
  { label: '全部排序', value: 'all' },
  { label: '按价格从低到高', value: 'price_asc' },
  { label: '按价格从高到低', value: 'price_desc' },
  { label: '按销量优先', value: 'sales' }
])

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

---

API 属性说明 (Props)

参数名	说明	类型	可选值	默认值
v-model:show	控制顶端下拉面板的显隐	Boolean	true | false	false
v-model:value	当前选中的选项值	String | Number	-	''
items	下拉筛选选项列表	Array	-	[]
top	面板距离顶部的偏移位置 (支持 '88rpx' 等)	Number | String	-	0
activeColor	选中项文案与打勾图标高亮颜色	String	-	''

---

事件说明 (Events)

事件名	说明	回调参数
update:show	v-model:show 双向绑定更新	(show: boolean)
update:value	v-model:value 双向绑定更新	(value: String | Number)
select	点击选项时触发	(item: Object | String)
close	面板完全收回关闭时触发	-

---

插槽说明 (Slots)

插槽名	说明
default	下拉面板底部的自定义扩展面板内容