Dropdown 下拉菜单
点击触发器展开菜单,浮层定位到触发元素旁。
基础用法
点击触发
放置方向
四个方向
多级子菜单
items 项支持 children 数组级联子菜单(任意层级),hover / 点击展开,选中叶子项后自动收回并关闭;浮层菜单复用了 oas-menu 渲染,多级子菜单贴近视口边缘时自动向左 / 向上翻转保证完整可见。
多级子菜单
禁用项
禁用项
选择事件
选择事件
受控显示
open 属性受控:外部按钮设置 / 移除 open 控制菜单显隐(点击外部 / Esc / 选择后仍会关闭)。
受控显示(open 属性)
受控选中项
value 属性受控:外部设置 value 指定选中项(下拉菜单无勾选标识,用标签实时回显当前值);选择菜单项同样会更新 value 并派发 oas-select。
受控选中(value 属性)
API
属性
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
items | 菜单项 JSON | string | [] |
open | 受控显示(布尔属性,存在即展开) | boolean | — |
placement | 浮层位置 | Placement | bottom |
value | 当前选中值 | string | — |
事件
| 事件 | 说明 |
|---|---|
oas-select | 选择某项,detail: { value } |
插槽
| 名称 | 说明 |
|---|---|
| 默认 | — |
点击触发器切换显隐,点击外部 / 按 Esc / 选择后关闭;浮层为内层 oas-menu(role="menu",叶子项 menuitemradio、带子菜单项 menuitem),支持多级级联子菜单与键盘导航。