ant-design-vue/components/dropdown/demo/placement.md

63 lines
1.3 KiB
Markdown
Raw Normal View History

2018-01-29 10:57:20 +00:00
<cn>
#### 弹出位置
支持 6 个弹出位置。
</cn>
<us>
#### Placement
Support 6 placements.
</us>
2019-10-09 10:32:23 +00:00
```tpl
2018-01-29 10:57:20 +00:00
<template>
<div id="components-dropdown-demo-placement">
<template v-for="(placement, index) in placements">
<a-dropdown :placement="placement">
<a-button>{{placement}}</a-button>
<a-menu slot="overlay">
<a-menu-item>
2019-09-28 12:45:07 +00:00
<a target="_blank" rel="noopener noreferrer" href="http://www.alipay.com/"
>1st menu item</a
>
2018-01-29 10:57:20 +00:00
</a-menu-item>
<a-menu-item>
2019-09-28 12:45:07 +00:00
<a target="_blank" rel="noopener noreferrer" href="http://www.taobao.com/"
>2nd menu item</a
>
2018-01-29 10:57:20 +00:00
</a-menu-item>
<a-menu-item>
2019-09-28 12:45:07 +00:00
<a target="_blank" rel="noopener noreferrer" href="http://www.tmall.com/"
>3rd menu item</a
>
2018-01-29 10:57:20 +00:00
</a-menu-item>
</a-menu>
</a-dropdown>
2019-09-28 12:45:07 +00:00
<br v-if="index === 2" />
2018-01-29 10:57:20 +00:00
</template>
</div>
</template>
<script>
2019-09-28 12:45:07 +00:00
export default {
data() {
return {
placements: [
'bottomLeft',
'bottomCenter',
'bottomRight',
'topLeft',
'topCenter',
'topRight',
],
};
},
};
2018-01-29 10:57:20 +00:00
</script>
<style>
2019-09-28 12:45:07 +00:00
#components-dropdown-demo-placement .ant-btn {
margin-right: 8px;
margin-bottom: 8px;
}
2018-01-29 10:57:20 +00:00
</style>
```