# Dropdown 下拉菜单

展示一组折叠的下拉菜单。

# 基础用法 事件示例

需要配合 Dropdown-menuDropdown-item 两个组件来使用,并且给列表设置具名 slot 为 list
触发对象可以是链接、按钮等各种元素。
本例还展示了禁用项和分隔线。

# 触发方式

通过设置属性 trigger 可以更改触发方式,可选项为 click 、 hover(默认) 或 custom(自定义)。
触发方式设置为 custom 自定义时,需手动设置 visible 属性来控制下拉框的显示。

# 对齐方向

通过设置属性 placement 可以更改下拉菜单出现的方向,与 Poptip 和 Tooltip 配置一致,支持 12 个方向,详见 API

# 嵌套用法

下拉菜单可以进行嵌套实现级联的效果,嵌套时注意设置子集的展开方向。

属性 说明 类型 默认值
trigger 触发方式,可选值为 hover(悬停)click(点击)custom(自定义),使用 custom 时,需配合 visible 一起使用 String hover
visible 手动控制下拉框的显示,在 trigger = 'custom' 时使用 Boolean false
placement 下拉菜单出现的位置,可选值为 top top-start top-end bottom bottom-start bottom-end left left-start left-end right right-start right-end String bottom
autoPlacement 日期面板方向自适应,其相对于外部第一个非静态定位父元素开始定位(1.0.77) Boolean false
transfer 是否将弹层放置于 body 内,在 Tabs、带有 fixed 的 Table 列内使用时,建议添加此属性,它将不受父级样式影响,从而达到更好的效果 Boolean false
adaptParentWidth 弹框宽度是否跟随父节点宽度(v1.0.29) Boolean false
transferzIndex 自定义下拉面板的z-index值,主要用于弹框中注意:transferzIndex属性需要搭配transfer一起使用(v1.11.0) Number 900,1001(弹框中)
事件名 说明 返回值
on-click 点击菜单项时触发 Dropdown-item 的 name 值
on-visible-change 菜单显示状态改变时调用 visible
名称 说明
主体内容
list 列表内容,一般由 Dropdown-menu 承担
属性 说明 类型 默认值
name 用来标识这一项 String -
disabled 禁用该项 Boolean false
divided 显示分割线 Boolean false
selected 标记该项为选中状态 Boolean false