Skip to content

Dropdown 下拉菜单

点击触发器展开菜单,浮层定位到触发元素旁。

基础用法

点击触发

操作

放置方向

四个方向

多级子菜单

items 项支持 children 数组级联子菜单(任意层级),hover / 点击展开,选中叶子项后自动收回并关闭;浮层菜单复用了 oas-menu 渲染,多级子菜单贴近视口边缘时自动向左 / 向上翻转保证完整可见。

多级子菜单

更多操作

禁用项

禁用项

操作

选择事件

选择事件

选择操作尚未选择

受控显示

open 属性受控:外部按钮设置 / 移除 open 控制菜单显隐(点击外部 / Esc / 选择后仍会关闭)。

受控显示(open 属性)

打开关闭open: false触发元素

受控选中项

value 属性受控:外部设置 value 指定选中项(下拉菜单无勾选标识,用标签实时回显当前值);选择菜单项同样会更新 value 并派发 oas-select

受控选中(value 属性)

选中「编辑」选中「复制」清除value: -选择操作

API

属性

属性说明类型默认值
items菜单项 JSONstring[]
open受控显示(布尔属性,存在即展开)boolean
placement浮层位置Placementbottom
value当前选中值string

事件

事件说明
oas-select选择某项,detail: { value }

插槽

名称说明
默认

点击触发器切换显隐,点击外部 / 按 Esc / 选择后关闭;浮层为内层 oas-menurole="menu",叶子项 menuitemradio、带子菜单项 menuitem),支持多级级联子菜单与键盘导航。