element-ui/examples/docs/dropdown.md

基础用法

通过与 button 一致的 type 属性来指定菜单按钮类型。

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

<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属性设为false来呈现不带独立按钮的下拉菜单。

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

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

通过点击触发下拉

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

<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 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>
  <el-dropdown-item class="divider">选项四</el-dropdown-item>
</el-dropdown>

API

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