test/element
1
0
Fork 0
mirror of https://gitee.com/ElemeFE/element.git synced 2024-12-03 20:58:09 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity
0092a38419
element/examples/docs/dropdown.md
qingwei.li e320f43c2d Initial commit
2016-07-27 14:15:02 +08:00

5.9 KiB
Raw Blame History

基础用法

通过与 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