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
,可以手动控制下拉菜单的显示与隐藏。通过组件实例上的 show
和 hide
方法即可实现手动控制。
<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-options | popper.js 参数设置 | object 参考 popper.js 文档 | {} |
open-delay | 下拉菜单显示的延迟时间(毫秒) | number | 0 |
close-delay | 下拉菜单消失的延迟时间(毫秒) | number | 200 |
trigger | 触发方式 | 'hover' | 'click' | hover |
manual | 是否开启手动触发模式 | boolean | false |
transition | 自定义过渡动画名称 | string | '' |
hideAfterClick | 点击选项后是否自动隐藏菜单 | boolean | true |
MenuOption
属性名 | 说明 | 类型 | 默认值 |
---|---|---|---|
label | 菜单展示标签 | 'string' | 'vNode' | |
key | 菜单选项的唯一标识 | 'string' | 'number' | |
disabled | 是否禁用选项 | boolean | false |
divided | 是否显示分隔符 | boolean | false |
Events
事件名 | 说明 | 类型 |
---|---|---|
visible-change | 当下拉菜单的显示或隐藏时触发 | boolean |
select | 当选择某个菜单选项时触发 | MenuOption |
Exposes
方法名 | 说明 | 类型 |
---|---|---|
show | 手动显示下拉菜单 | (event?: Event | undefined) => void |
hide | 手动隐藏下拉菜单 | (event?: Event | undefined) => void |