Dropdown 下拉菜单

将动作或菜单折叠到下拉菜单中。

基础用法

悬停在下拉菜单上以展开更多操作。

<script setup>
import { h } from 'vue'
import Dropdown from '@/components/Dropdown/Dropdown.vue'
import Button from '@/components/Button/Button.vue'
const options = [
  { key: 1, label: h('b', 'this is bold') },
  { key: 2, label: 'item2', disabled: true },
  { key: 3, label: 'item3', divided: true },
  { key: 4, label: 'item4' }
]
</script>
<template>
  <div class="basic block">
    <Dropdown
        placement="bottom"
        :menu-options="options"
    >
      <Button type="primary"> Hover 下拉菜单 </Button>
    </Dropdown>
  </div>
</template>
<style>
.vp-doc .vitepress-demo-preview-preview ul, .vp-doc .vitepress-demo-preview-preview  ol {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

</style>

触发方式

可以配置点击激活或者悬停激活。

将 trigger 属性设置为 click 即可， 默认为 hover。

<script setup>
import { h } from 'vue'
import Dropdown from '@/components/Dropdown/Dropdown.vue'
import Button from '@/components/Button/Button.vue'
const options = [
  { key: 1, label: h('b', 'this is bold') },
  { key: 2, label: 'item2', disabled: true },
  { key: 3, label: 'item3', divided: true },
  { key: 4, label: 'item4' }
]
</script>
<template>
  <div class="basic block">
    <Dropdown
        placement="bottom"
        :menu-options="options"
        trigger="click"
    >
      <Button type="primary"> 点击触发下拉菜单 </Button>
    </Dropdown>
  </div>
</template>

手动打开关闭

将 manual 属性设置为 true 即可， 然后可以使用实例上面的 show 和 hide 方法打开关闭下拉菜单。

<script setup>
import { h, ref } from 'vue'
import Dropdown from '@/components/Dropdown/Dropdown.vue'
import Button from '@/components/Button/Button.vue'
const options = [
{ key: 1, label: h('b', 'this is bold') },
{ key: 2, label: 'item2', disabled: true },
{ key: 3, label: 'item3', divided: true },
{ key: 4, label: 'item4' }
]
const tooltipRef = ref()
const open = () => {
tooltipRef.value?.show()
}
const close = () => {
tooltipRef.value?.hide()
}
</script>
<template>
  <div class="basic block">
    <Dropdown
        placement="bottom"
        :menu-options="options"
        trigger="click"
        manual
        ref="tooltipRef"
    >
      <Button> 菜单容器 </Button>
    </Dropdown>
    <br/><br/>
    <Button type="primary" @click="open"> 点击手动触发显示 </Button>
    <Button type="danger" @click="close"> 点击手动触发隐藏 </Button>
  </div>
</template>

React 用法

import { Dropdown } from '@bobocn/element/react'
import type { MenuOption } from '@bobocn/element/react'
import '@bobocn/element/style.css'

const menuOptions: MenuOption[] = [
  { key: 1, label: '选项一' },
  { key: 2, label: '选项二' },
  { key: 3, label: '选项三', disabled: true },
  { key: 4, label: '选项四', divided: true },
]

function App() {
  return (
    <Dropdown
      menuOptions={menuOptions}
      trigger="hover"
      onSelect={(item) => console.log('选中:', item)}
    >
      <button>下拉菜单</button>
    </Dropdown>
  )
}

// 点击触发
<Dropdown menuOptions={menuOptions} trigger="click">
  <button>点击展开</button>
</Dropdown>

API

属性 (Attributes)

属性名	说明	类型	默认值
menuOptions	菜单选项	MenuOption[]	[]
hideAfterClick	点击菜单项后是否隐藏	boolean	true
trigger	触发方式	'hover' | 'click'	hover
placement	弹出位置	'top' | 'bottom' | 'left' | 'right' | 'top-start' | 'top-end' | 'bottom-start' | 'bottom-end' | 'left-start' | 'left-end' | 'right-start' | 'right-end'	bottom
manual	是否手动控制	boolean	false
popperOptions	Popper.js 配置项	object	—
openDelay	打开延迟（毫秒）	number	0
closeDelay	关闭延迟（毫秒）	number	200
transition	过渡动画名	string	—

事件 (Events)

事件名	说明	回调参数
visible-change	下拉菜单显示/隐藏时触发	(visible: boolean) => void
select	选择菜单项时触发	(item: MenuOption) => void

插槽 (Slots)

插槽名	说明
default	触发下拉菜单的元素
content	自定义下拉菜单内容

方法 (Exposes)

方法名	说明	类型
show	手动显示下拉菜单	() => void
hide	手动隐藏下拉菜单	() => void