Dropdown 下拉菜单

概述

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

代码示例

Dropdown 下拉菜单 - 图1

基础用法

需要配合 DropdownMenuDropdownItem 两个组件来使用,并且给列表设置具名 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 {
  31. }
  32. </script>

Dropdown 下拉菜单 - 图2

触发方式

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

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

<template>
    <Dropdown>
        <a href="javascript:void(0)">
            hover 触发
            <Icon type="ios-arrow-down"></Icon>
        </a>
        <DropdownMenu slot="list">
            <DropdownItem>驴打滚</DropdownItem>
            <DropdownItem>炸酱面</DropdownItem>
            <DropdownItem>豆汁儿</DropdownItem>
            <DropdownItem>冰糖葫芦</DropdownItem>
            <DropdownItem>北京烤鸭</DropdownItem>
        </DropdownMenu>
    </Dropdown>
    <Dropdown trigger="click" style="margin-left: 20px">
        <a href="javascript:void(0)">
            click 触发
            <Icon type="ios-arrow-down"></Icon>
        </a>
        <DropdownMenu slot="list">
            <DropdownItem>驴打滚</DropdownItem>
            <DropdownItem>炸酱面</DropdownItem>
            <DropdownItem>豆汁儿</DropdownItem>
            <DropdownItem>冰糖葫芦</DropdownItem>
            <DropdownItem>北京烤鸭</DropdownItem>
        </DropdownMenu>
    </Dropdown>
    <Dropdown trigger="contextMenu" style="margin-left: 20px">
        <a href="javascript:void(0)">
            right click
            <Icon type="ios-arrow-down"></Icon>
        </a>
        <DropdownMenu slot="list">
            <DropdownItem>返回</DropdownItem>
            <DropdownItem style="color: #ed4014">删除</DropdownItem>
        </DropdownMenu>
    </Dropdown>
    <Dropdown trigger="custom" :visible="visible" style="margin-left: 20px">
        <a href="javascript:void(0)" @click="handleOpen">
            custom 触发
            <Icon type="ios-arrow-down"></Icon>
        </a>
        <DropdownMenu slot="list">
            <p>常用于各种自定义下拉内容的场景。</p>
            <div style="text-align: right;margin:10px;">
                <Button type="primary" @click="handleClose">关闭</Button>
            </div>
        </DropdownMenu>
    </Dropdown>
</template>
<script>
    export default {
        data () {
            return {
                visible: false
            }
        },
        methods: {
            handleOpen () {
                this.visible = true;
            },
            handleClose () {
                this.visible = false;
            }
        }
    }
</script>

Dropdown 下拉菜单 - 图3

对齐方向

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

<template>
    <Dropdown placement="bottom-start">
        <a href="javascript:void(0)">
            菜单(左)
            <Icon type="ios-arrow-down"></Icon>
        </a>
        <DropdownMenu slot="list">
            <DropdownItem>驴打滚</DropdownItem>
            <DropdownItem>炸酱面</DropdownItem>
            <DropdownItem>豆汁儿</DropdownItem>
            <DropdownItem>冰糖葫芦</DropdownItem>
            <DropdownItem>北京烤鸭</DropdownItem>
        </DropdownMenu>
    </Dropdown>
    <Dropdown style="margin-left: 20px">
        <a href="javascript:void(0)">
            菜单(居中)
            <Icon type="ios-arrow-down"></Icon>
        </a>
        <DropdownMenu slot="list">
            <DropdownItem>驴打滚</DropdownItem>
            <DropdownItem>炸酱面</DropdownItem>
            <DropdownItem>豆汁儿</DropdownItem>
            <DropdownItem>冰糖葫芦</DropdownItem>
            <DropdownItem>北京烤鸭</DropdownItem>
        </DropdownMenu>
    </Dropdown>
    <Dropdown style="margin-left: 20px" placement="bottom-end">
        <a href="javascript:void(0)">
            菜单(右)
            <Icon type="ios-arrow-down"></Icon>
        </a>
        <DropdownMenu slot="list">
            <DropdownItem>驴打滚</DropdownItem>
            <DropdownItem>炸酱面</DropdownItem>
            <DropdownItem>豆汁儿</DropdownItem>
            <DropdownItem>冰糖葫芦</DropdownItem>
            <DropdownItem>北京烤鸭</DropdownItem>
        </DropdownMenu>
    </Dropdown>
</template>
<script>
    export default {

    }
</script>

Dropdown 下拉菜单 - 图4

嵌套用法

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

<template>
    <Dropdown>
        <a href="javascript:void(0)">
            北京小吃
            <Icon type="ios-arrow-down"></Icon>
        </a>
        <DropdownMenu slot="list">
            <DropdownItem>驴打滚</DropdownItem>
            <DropdownItem>炸酱面</DropdownItem>
            <DropdownItem>豆汁儿</DropdownItem>
            <Dropdown placement="right-start">
                <DropdownItem>
                    北京烤鸭
                    <Icon type="ios-arrow-forward"></Icon>
                </DropdownItem>
                <DropdownMenu slot="list">
                    <DropdownItem>挂炉烤鸭</DropdownItem>
                    <DropdownItem>焖炉烤鸭</DropdownItem>
                </DropdownMenu>
            </Dropdown>
            <DropdownItem>冰糖葫芦</DropdownItem>
        </DropdownMenu>
    </Dropdown>
</template>
<script>
    export default {

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