• Dropdown 下拉菜单
    • 概述
    • 代码示例
    • API
      • Dropdown props
      • Dropdown events
      • Dropdown slot
      • DropdownItem props

    Dropdown 下拉菜单

    概述

    展示一组折叠的下拉菜单。

    代码示例

    Dropdown 下拉菜单 - 图1

    基础用法

    需要配合 DropdownMenu 和 DropdownItem 两个组件来使用，并且给列表设置具名 slot 为 list。

    触发对象可以是链接、按钮等各种元素。

    本例还展示了禁用项和分隔线。

    1. <template>
    2.     <Dropdown>
    3.         <a href="javascript:void(0)">
    4.             下拉菜单
    5.             <Icon type="ios-arrow-down"></Icon>
    6.         </a>
    7.         <DropdownMenu slot="list">
    8.             <DropdownItem>驴打滚</DropdownItem>
    9.             <DropdownItem>炸酱面</DropdownItem>
    10.             <DropdownItem disabled>豆汁儿</DropdownItem>
    11.             <DropdownItem>冰糖葫芦</DropdownItem>
    12.             <DropdownItem divided>北京烤鸭</DropdownItem>
    13.         </DropdownMenu>
    14.     </Dropdown>
    15.     <Dropdown style="margin-left: 20px">
    16.         <Button type="primary">
    17.             下拉菜单
    18.             <Icon type="ios-arrow-down"></Icon>
    19.         </Button>
    20.         <DropdownMenu slot="list">
    21.             <DropdownItem>驴打滚</DropdownItem>
    22.             <DropdownItem>炸酱面</DropdownItem>
    23.             <DropdownItem disabled>豆汁儿</DropdownItem>
    24.             <DropdownItem>冰糖葫芦</DropdownItem>
    25.             <DropdownItem divided>北京烤鸭</DropdownItem>
    26.         </DropdownMenu>
    27.     </Dropdown>
    28. </template>
    29. <script>
    30.     export default {
    32.     }
    33. </script>

    Dropdown 下拉菜单 - 图2

    触发方式

    通过设置属性 trigger 可以更改触发方式，可选项为 click 、 hover(默认) 或 custom(自定义)。

    触发方式设置为 custom 自定义时，需手动设置 visible 属性来控制下拉框的显示。

    1. <template>
    2.     <Dropdown>
    3.         <a href="javascript:void(0)">
    4.             hover 触发
    5.             <Icon type="ios-arrow-down"></Icon>
    6.         </a>
    7.         <DropdownMenu slot="list">
    8.             <DropdownItem>驴打滚</DropdownItem>
    9.             <DropdownItem>炸酱面</DropdownItem>
    10.             <DropdownItem>豆汁儿</DropdownItem>
    11.             <DropdownItem>冰糖葫芦</DropdownItem>
    12.             <DropdownItem>北京烤鸭</DropdownItem>
    13.         </DropdownMenu>
    14.     </Dropdown>
    15.     <Dropdown trigger="click" style="margin-left: 20px">
    16.         <a href="javascript:void(0)">
    17.             click 触发
    18.             <Icon type="ios-arrow-down"></Icon>
    19.         </a>
    20.         <DropdownMenu slot="list">
    21.             <DropdownItem>驴打滚</DropdownItem>
    22.             <DropdownItem>炸酱面</DropdownItem>
    23.             <DropdownItem>豆汁儿</DropdownItem>
    24.             <DropdownItem>冰糖葫芦</DropdownItem>
    25.             <DropdownItem>北京烤鸭</DropdownItem>
    26.         </DropdownMenu>
    27.     </Dropdown>
    28.     <Dropdown trigger="contextMenu" style="margin-left: 20px">
    29.         <a href="javascript:void(0)">
    30.             right click
    31.             <Icon type="ios-arrow-down"></Icon>
    32.         </a>
    33.         <DropdownMenu slot="list">
    34.             <DropdownItem>返回</DropdownItem>
    35.             <DropdownItem style="color: #ed4014">删除</DropdownItem>
    36.         </DropdownMenu>
    37.     </Dropdown>
    38.     <Dropdown trigger="custom" :visible="visible" style="margin-left: 20px">
    39.         <a href="javascript:void(0)" @click="handleOpen">
    40.             custom 触发
    41.             <Icon type="ios-arrow-down"></Icon>
    42.         </a>
    43.         <DropdownMenu slot="list">
    44.             <p>常用于各种自定义下拉内容的场景。</p>
    45.             <div style="text-align: right;margin:10px;">
    46.                 <Button type="primary" @click="handleClose">关闭</Button>
    47.             </div>
    48.         </DropdownMenu>
    49.     </Dropdown>
    50. </template>
    51. <script>
    52.     export default {
    53.         data () {
    54.             return {
    55.                 visible: false
    56.             }
    57.         },
    58.         methods: {
    59.             handleOpen () {
    60.                 this.visible = true;
    61.             },
    62.             handleClose () {
    63.                 this.visible = false;
    64.             }
    65.         }
    66.     }
    67. </script>

    Dropdown 下拉菜单 - 图3

    对齐方向

    通过设置属性 placement 可以更改下拉菜单出现的方向，与 Poptip 和 Tooltip 配置一致，支持 12 个方向，详见 API。

    1. <template>
    2.     <Dropdown placement="bottom-start">
    3.         <a href="javascript:void(0)">
    4.             菜单(左)
    5.             <Icon type="ios-arrow-down"></Icon>
    6.         </a>
    7.         <DropdownMenu slot="list">
    8.             <DropdownItem>驴打滚</DropdownItem>
    9.             <DropdownItem>炸酱面</DropdownItem>
    10.             <DropdownItem>豆汁儿</DropdownItem>
    11.             <DropdownItem>冰糖葫芦</DropdownItem>
    12.             <DropdownItem>北京烤鸭</DropdownItem>
    13.         </DropdownMenu>
    14.     </Dropdown>
    15.     <Dropdown style="margin-left: 20px">
    16.         <a href="javascript:void(0)">
    17.             菜单(居中)
    18.             <Icon type="ios-arrow-down"></Icon>
    19.         </a>
    20.         <DropdownMenu slot="list">
    21.             <DropdownItem>驴打滚</DropdownItem>
    22.             <DropdownItem>炸酱面</DropdownItem>
    23.             <DropdownItem>豆汁儿</DropdownItem>
    24.             <DropdownItem>冰糖葫芦</DropdownItem>
    25.             <DropdownItem>北京烤鸭</DropdownItem>
    26.         </DropdownMenu>
    27.     </Dropdown>
    28.     <Dropdown style="margin-left: 20px" placement="bottom-end">
    29.         <a href="javascript:void(0)">
    30.             菜单(右)
    31.             <Icon type="ios-arrow-down"></Icon>
    32.         </a>
    33.         <DropdownMenu slot="list">
    34.             <DropdownItem>驴打滚</DropdownItem>
    35.             <DropdownItem>炸酱面</DropdownItem>
    36.             <DropdownItem>豆汁儿</DropdownItem>
    37.             <DropdownItem>冰糖葫芦</DropdownItem>
    38.             <DropdownItem>北京烤鸭</DropdownItem>
    39.         </DropdownMenu>
    40.     </Dropdown>
    41. </template>
    42. <script>
    43.     export default {
    45.     }
    46. </script>

    Dropdown 下拉菜单 - 图4

    嵌套用法

    下拉菜单可以进行嵌套实现级联的效果，嵌套时注意设置子集的展开方向。

    1. <template>
    2.     <Dropdown>
    3.         <a href="javascript:void(0)">
    4.             北京小吃
    5.             <Icon type="ios-arrow-down"></Icon>
    6.         </a>
    7.         <DropdownMenu slot="list">
    8.             <DropdownItem>驴打滚</DropdownItem>
    9.             <DropdownItem>炸酱面</DropdownItem>
    10.             <DropdownItem>豆汁儿</DropdownItem>
    11.             <Dropdown placement="right-start">
    12.                 <DropdownItem>
    13.                     北京烤鸭
    14.                     <Icon type="ios-arrow-forward"></Icon>
    15.                 </DropdownItem>
    16.                 <DropdownMenu slot="list">
    17.                     <DropdownItem>挂炉烤鸭</DropdownItem>
    18.                     <DropdownItem>焖炉烤鸭</DropdownItem>
    19.                 </DropdownMenu>
    20.             </Dropdown>
    21.             <DropdownItem>冰糖葫芦</DropdownItem>
    22.         </DropdownMenu>
    23.     </Dropdown>
    24. </template>
    25. <script>
    26.     export default {
    28.     }
    29. </script>

    API

    Dropdown props

    属性说明类型默认值
    trigger触发方式，可选值为 hover（悬停）click（点击）contextMenu（右键）custom（自定义），使用 custom 时，需配合 visible 一起使用Stringhover
    visible手动控制下拉框的显示，在 trigger = 'custom' 时使用Booleanfalse
    placement下拉菜单出现的位置，可选值为toptop-starttop-endbottombottom-startbottom-endleftleft-startleft-endrightright-startright-end, 2.12.0 版本开始支持自动识别Stringbottom
    transfer是否将弹层放置于 body 内，在 Tabs、带有 fixed 的 Table 列内使用时，建议添加此属性，它将不受父级样式影响，从而达到更好的效果Booleanfalse
    transfer-class-name 3.3.0开启 transfer 时，给浮层添加额外的 class 名称String-
    stop-propagation 3.4.0是否开启 stop-propagationBooleanfalse

    Dropdown events

    事件名说明返回值
    on-click点击菜单项时触发DropdownItem 的 name 值
    on-visible-change菜单显示状态改变时调用visible
    on-clickoutside点击外部关闭下拉菜单时触发event

    Dropdown slot

    名称说明
    无主体内容
    list列表内容，一般由 DropdownMenu 承担

    DropdownItem props

    属性说明类型默认值
    name用来标识这一项String-
    disabled禁用该项Booleanfalse
    divided显示分割线Booleanfalse
    selected标记该项为选中状态Booleanfalse