iView UI参考手册
组件布局
Dropdown 下拉菜单
概述
展示一组折叠的下拉菜单。
代码示例
<template>
<Dropdown>
<a href="javascript:void(0)">
下拉菜单
<Icon type="ios-arrow-down"></Icon>
</a>
<DropdownMenu slot="list">
<DropdownItem>驴打滚</DropdownItem>
<DropdownItem>炸酱面</DropdownItem>
<DropdownItem disabled>豆汁儿</DropdownItem>
<DropdownItem>冰糖葫芦</DropdownItem>
<DropdownItem divided>北京烤鸭</DropdownItem>
</DropdownMenu>
</Dropdown>
<Dropdown style="margin-left: 20px">
<Button type="primary">
下拉菜单
<Icon type="ios-arrow-down"></Icon>
</Button>
<DropdownMenu slot="list">
<DropdownItem>驴打滚</DropdownItem>
<DropdownItem>炸酱面</DropdownItem>
<DropdownItem disabled>豆汁儿</DropdownItem>
<DropdownItem>冰糖葫芦</DropdownItem>
<DropdownItem divided>北京烤鸭</DropdownItem>
</DropdownMenu>
</Dropdown>
</template>
<script>
export default {
}
</script>
<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>
<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>
<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 一起使用 |
String |
hover |
visible |
手动控制下拉框的显示，在 trigger = 'custom' 时使用 |
Boolean |
false |
placement |
下拉菜单出现的位置，可选值为toptop-starttop-endbottombottom-startbottom-endleftleft-startleft-endrightright-startright-end, 2.12.0 版本开始支持自动识别 |
String |
bottom |
transfer |
是否将弹层放置于 body 内，在 Tabs、带有 fixed 的 Table 列内使用时，建议添加此属性，它将不受父级样式影响，从而达到更好的效果 |
Boolean |
false |
Dropdown events
事件名 |
说明 |
返回值 |
|---|---|---|
on-click |
点击菜单项时触发 |
DropdownItem 的 name 值 |
on-visible-change |
菜单显示状态改变时调用 |
visible |
on-clickoutside |
点击外部关闭下拉菜单时触发 |
event |
Dropdown slot
名称 |
说明 |
|---|---|
无 |
主体内容 |
list |
列表内容，一般由 DropdownMenu 承担 |
DropdownItem props
属性 |
说明 |
类型 |
默认值 |
|---|---|---|---|
name |
用来标识这一项 |
String |
- |
disabled |
禁用该项 |
Boolean |
false |
divided |
显示分割线 |
Boolean |
false |
selected |
标记该项为选中状态 |
Boolean |
false |
加载中,请稍侯......