# Dropdown 下拉菜单
# Dropdown 概述
展示一组折叠的下拉菜单。
# Dropdown 代码示例
# 基础用法 事件示例
需要配合 Dropdown-menu
和 Dropdown-item
两个组件来使用,并且给列表设置具名 slot 为 list
。
触发对象可以是链接、按钮等各种元素。
本例还展示了禁用项和分隔线。
# 触发方式
通过设置属性 trigger
可以更改触发方式,可选项为 click 、 hover(默认) 或 custom(自定义)。
触发方式设置为 custom 自定义时,需手动设置 visible 属性来控制下拉框的显示。
# 对齐方向
通过设置属性 placement
可以更改下拉菜单出现的方向,与 Poptip 和 Tooltip 配置一致,支持 12 个方向,详见 API。
# 嵌套用法
下拉菜单可以进行嵌套实现级联的效果,嵌套时注意设置子集的展开方向。
# Dropdown API
# Dropdown props
属性 | 说明 | 类型 | 默认值 |
---|---|---|---|
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(弹框中) |
# Dropdown events
事件名 | 说明 | 返回值 |
---|---|---|
on-click | 点击菜单项时触发 | Dropdown-item 的 name 值 |
on-visible-change | 菜单显示状态改变时调用 | visible |
# Dropdown slot
名称 | 说明 |
---|---|
无 | 主体内容 |
list | 列表内容,一般由 Dropdown-menu 承担 |
# Dropdown-item props
属性 | 说明 | 类型 | 默认值 |
---|---|---|---|
name | 用来标识这一项 | String | - |
disabled | 禁用该项 | Boolean | false |
divided | 显示分割线 | Boolean | false |
selected | 标记该项为选中状态 | Boolean | false |