下拉菜单 Dropdown

用于展示一组操作或选项的弹出菜单，支持 click/hover 触发、禁用选项和多种弹出位置。

基础用法

通过 #content 插槽放置 bp-doption 选项，@select 事件获取选中值。

<template>
  <bp-dropdown @select="handleSelect">
    <bp-button status="gray" type="secondary">下</bp-button>

    <template #content>
      <bp-doption value="1">选项一</bp-doption>
      <bp-doption value="2">选项二</bp-doption>
      <bp-doption value="3">选项三</bp-doption>
      <bp-doption value="4">选项四</bp-doption>
      <bp-doption value="5">选项五</bp-doption>
    </template>
  </bp-dropdown>
</template>

<script setup lang="ts">
const handleSelect = (value: string) => {
  console.log(value);
};
</script>

触发方式与位置

通过 trigger 属性切换触发方式（click / hover），position 设置弹出位置。

<template>
  <bp-space>
    <bp-dropdown trigger="hover" @select="handleSelect">
      <bp-button status="gray" type="secondary">hover 触发</bp-button>

      <template #content>
        <bp-doption value="edit">编辑</bp-doption>
        <bp-doption value="copy">复制</bp-doption>
        <bp-doption value="delete">删除</bp-doption>
      </template>
    </bp-dropdown>

    <bp-dropdown trigger="click" position="bottom-right" style="margin-left: 16px" @select="handleSelect">
      <bp-button status="gray" type="secondary">click 触发 (右对齐)</bp-button>

      <template #content>
        <bp-doption value="1">选项一</bp-doption>
        <bp-doption value="2">选项二</bp-doption>
        <bp-doption value="3" disabled>禁用项</bp-doption>
      </template>
    </bp-dropdown>
  </bp-space>
</template>

<script setup lang="ts">
const handleSelect = (value: string) => {
  console.log(value);
};
</script>

Dropdown 属性

position	弹出位置	TriggerPosition	bottom	-
trigger	触发方式	TriggerType	click	-

Doption 属性

value	选项值	StringNumber	-	-
disabled	是否禁用	Boolean	-	-

Dropdown 事件

select

选中触发

value?: DoptionValue

-

Dropdown 方法

open	打开下拉	-	-	-
close	关闭下拉	-	-	-

Dropdown 插槽

default	触发区域	-	-
content	下拉内容	-	-

Doption 插槽

default

选项内容

-

-