element

9.1 KiB

Raw Blame History

基础用法

Dropdown 组件只需要el-dropdown和它的子元素el-dropdown-item即可生成对应的下拉菜单，通过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>

不带独立按钮的下拉菜单

如果不需要默认的主要按钮与下拉按钮的组合，可以通过设置icon-separate属性来呈现不带独立按钮的下拉菜单，它接受一个Boolean，设置为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>

通过点击触发下拉

默认通过 Hover 即可出现下拉菜单，如果有需求，可以改成 click ，只要在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 组件的对应文档，下两例说明了相应字段的功能：

选项一选项二选项三选项四

<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>

选项一选项二选项三

选项四选项一选项二选项三选项四选项一选项二选项三选项四选项一选项二选项三选项四

<el-dropdown text="下拉菜单" type="primary" size="large">
  <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>
<el-dropdown text="下拉菜单" type="primary">
  <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 text="下拉菜单" type="primary" size="small">
  <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 text="下拉菜单" type="primary" size="mini">
  <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>

对齐方式

下拉菜单的对齐方式有两种：start与end，在下例中演示了它们的区别，你可以通过设置menu-align来选择一种对齐方式，默认为end：

选项一选项二选项三选项四选项一选项二选项三选项四

<el-dropdown text="下拉菜单 end" type="primary" menu-align="end">
  <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 text="下拉菜单 start" type="primary" menu-align="start">
  <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>

Attributes

参数	说明	类型	可选值	默认值
text	菜单按钮文本	string
type	菜单按钮类型，同 Button 组件	string
trigger	触发下拉菜单的方式	string	hover,click	hover
icon-separate	独立的下拉菜单按钮	boolean		false
size	菜单按钮尺寸，同 Button 组件	string	large, small, mini
menu-align	菜单水平对齐方向	string	start, end	end

9.1 KiB Raw Blame History Unescape Escape