element

4.7 KiB

Raw Blame History

将动作或菜单折叠到下拉菜单中。

基础用法

移动到下拉菜单上，展开更多操作。

:::demo 通过text属性来设置按钮文字。默认条件下，他由一个主要按钮和一个下拉按钮组成，el-dropdown中的主要按钮同样可以设置点击事件，只要使用mainclick事件即可。默认情况下，下拉按钮只要hover即可，无需点击也会显示下拉菜单。

<el-dropdown text="主要按钮" type="primary" @mainclick="handleMainClick()">
  <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>

:::

不带独立按钮的下拉菜单

:::demo 设置icon-separate属性来呈现不带独立按钮的下拉菜单，设置为false即可。在选项三和选项四中插入了一条分割线，只需要在选项四中设置class为divider。

<el-dropdown text="下拉菜单" type="primary" :icon-separate="false">
  <el-dropdown-item>选项一</el-dropdown-item>
  <el-dropdown-item>选项二</el-dropdown-item>
  <el-dropdown-item>选项三</el-dropdown-item>
  <el-dropdown-item class="divider">选项四</el-dropdown-item>
</el-dropdown>

:::

通过点击触发下拉

:::demo 在trigger属性设置为click即可。

<el-dropdown text="主要按钮" type="primary" trigger="click">
  <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>
<el-dropdown text="下拉菜单" type="primary" :icon-separate="false" trigger="click">
  <el-dropdown-item>选项一</el-dropdown-item>
  <el-dropdown-item>选项二</el-dropdown-item>
  <el-dropdown-item>选项三</el-dropdown-item>
  <el-dropdown-item class="divider">选项四</el-dropdown-item>
</el-dropdown>

:::

按钮样式

除了上述属性以外，由于本质还是按钮，el-dropdown同样拥有 Button 组件的相关属性：type和size，关于这点，可以参考 Button 组件的对应文档，下两例说明了相应字段的功能：

:::demo

<el-dropdown text="下拉菜单" type="text" :icon-separate="false">
  <el-dropdown-item>选项一</el-dropdown-item>
  <el-dropdown-item>选项二</el-dropdown-item>
  <el-dropdown-item>选项三</el-dropdown-item>
  <li class="divider">选项四</el-dropdown-item>
</el-dropdown>

:::