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