mirror of
https://gitee.com/ElemeFE/element.git
synced 2024-12-11 10:04:53 +08:00
5.4 KiB
5.4 KiB
Dropdown 下拉菜单
将动作或菜单折叠到下拉菜单中。
基础用法
移动到下拉菜单上,展开更多操作。
:::demo 通过组件slot
来设置下拉触发的元素以及需要通过具名slot
为dropdown
来设置下拉菜单。默认情况下,下拉按钮只要hover
即可,无需点击也会显示下拉菜单。
<el-dropdown>
<span class="el-dropdown-link">
下拉菜单<i class="el-icon-caret-bottom el-icon--right"></i>
</span>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item>黄金糕</el-dropdown-item>
<el-dropdown-item>狮子头</el-dropdown-item>
<el-dropdown-item>螺蛳粉</el-dropdown-item>
<el-dropdown-item disabled>双皮奶</el-dropdown-item>
<el-dropdown-item divided>蚵仔煎</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
:::
触发对象
可使用按钮触发下拉菜单。
:::demo 设置split-button
属性来让触发下拉元素呈现为按钮组,左边是功能按钮,右边是触发下拉菜单的按钮,设置为true
即可。
<el-dropdown>
<el-button type="primary">
更多菜单<i class="el-icon-caret-bottom el-icon--right"></i>
</el-button>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item>黄金糕</el-dropdown-item>
<el-dropdown-item>狮子头</el-dropdown-item>
<el-dropdown-item>螺蛳粉</el-dropdown-item>
<el-dropdown-item>双皮奶</el-dropdown-item>
<el-dropdown-item>蚵仔煎</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
<el-dropdown split-button type="primary" @click="handleClick">
更多菜单
<el-dropdown-menu slot="dropdown">
<el-dropdown-item>黄金糕</el-dropdown-item>
<el-dropdown-item>狮子头</el-dropdown-item>
<el-dropdown-item>螺蛳粉</el-dropdown-item>
<el-dropdown-item>双皮奶</el-dropdown-item>
<el-dropdown-item>蚵仔煎</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
:::
触发方式
可以配置 click 激活或者 hover 激活。
:::demo 在trigger
属性设置为click
即可。
<el-row class="block-col-2">
<el-col :span="12">
<span class="demonstration">hover 激活</span>
<el-dropdown>
<span class="el-dropdown-link">
下拉菜单<i class="el-icon-caret-bottom el-icon--right"></i>
</span>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item>黄金糕</el-dropdown-item>
<el-dropdown-item>狮子头</el-dropdown-item>
<el-dropdown-item>螺蛳粉</el-dropdown-item>
<el-dropdown-item>双皮奶</el-dropdown-item>
<el-dropdown-item>蚵仔煎</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</el-col>
<el-col :span="12">
<span class="demonstration">click 激活</span>
<el-dropdown trigger="click">
<span class="el-dropdown-link">
下拉菜单<i class="el-icon-caret-bottom el-icon--right"></i>
</span>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item>黄金糕</el-dropdown-item>
<el-dropdown-item>狮子头</el-dropdown-item>
<el-dropdown-item>螺蛳粉</el-dropdown-item>
<el-dropdown-item>双皮奶</el-dropdown-item>
<el-dropdown-item>蚵仔煎</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</el-col>
</el-row>
:::
Dropdown Attributes
参数 | 说明 | 类型 | 可选值 | 默认值 |
---|---|---|---|---|
type | 菜单按钮类型,同 Button 组件(只在split-button 为 true 的情况下有效) |
string | — | — |
size | 菜单按钮尺寸,同 Button 组件(只在split-button 为 true 的情况下有效) |
string | — | — |
split-button | 下拉触发元素呈现为按钮组 | boolean | — | false |
menu-align | 菜单水平对齐方向 | string | start, end | end |
trigger | 触发下拉的行为 | string | hover, click | hover |
Dropdown Events
事件名称 | 说明 | 回调参数 |
---|---|---|
click | split-button 为 true 时,点击左侧按钮的回调 |
— |
command | 点击菜单项触发的事件回调 | dropdown-item 的指令 |
Dropdown Menu Item Attributes
参数 | 说明 | 类型 | 可选值 | 默认值 |
---|---|---|---|---|
command | 指令 | string | — | — |
disabled | 禁用 | boolean | — | false |
divided | 显示分割线 | boolean | — | false |