Skip to content

Dropdown 下拉菜单

Dropdown 组件用于将动作或菜单折叠到下拉菜单中,提供简洁的用户操作界面。

基础用法

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

<script setup>
import { h } from '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">
    <l-dropdown placement="bottom" :menu-options="options">
      <l-button type="primary"> Hover 下拉菜单 </l-button>
    </l-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'

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">
    <l-dropdown placement="bottom" :menu-options="options" trigger="click">
      <l-button type="primary"> 点击触发下拉菜单 </l-button>
    </l-dropdown>
  </div>
</template>

手动打开与关闭

设置 manual 属性为 true,可以手动控制下拉菜单的显示与隐藏。通过组件实例上的 showhide 方法即可实现手动控制。



<script setup>
import { h, ref } from '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">
    <l-dropdown placement="bottom" :menu-options="options" trigger="click" manual ref="tooltipRef">
      <l-button> 菜单容器 </l-button>
    </l-dropdown>
    <br /><br />
    <l-button type="primary" @click="open" style="margin-right: 8px"> 点击手动触发显示 </l-button>
    <l-button type="danger" @click="close"> 点击手动触发隐藏 </l-button>
  </div>
</template>

API

Attributes

属性名说明类型默认值
menuOptions菜单选项MenuOption[][]
placement菜单位置'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'left' | 'left-start' | 'left-end' | 'right' | 'right-start' | 'right-end'bottom
popper-optionspopper.js 参数设置object 参考 popper.js 文档{}
open-delay下拉菜单显示的延迟时间(毫秒)number0
close-delay下拉菜单消失的延迟时间(毫秒)number200
trigger触发方式'hover' | 'click'hover
manual是否开启手动触发模式booleanfalse
transition自定义过渡动画名称string''
hideAfterClick点击选项后是否自动隐藏菜单booleantrue
属性名说明类型默认值
label菜单展示标签'string' | 'vNode'
key菜单选项的唯一标识'string' | 'number'
disabled是否禁用选项booleanfalse
divided是否显示分隔符booleanfalse

Events

事件名说明类型
visible-change当下拉菜单的显示或隐藏时触发boolean
select当选择某个菜单选项时触发MenuOption

Exposes

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