60 lines
1.4 KiB
Markdown
60 lines
1.4 KiB
Markdown
|
<cn>
|
||
|
|
#### 带下拉框的按钮
|
||
|
|
左边是按钮，右边是额外的相关功能菜单。
|
||
|
|
</cn>
|
||
|
|
|
||
|
|
<us>
|
||
|
|
#### Button with dropdown menu
|
||
|
|
A button is on the left, and a related functional menu is on the right.
|
||
|
|
</us>
|
||
|
|
|
||
|
|
```html
|
||
|
|
<template>
|
||
|
|
<div>
|
||
|
|
<a-dropdown-button @click="handleMenuClick">
|
||
|
|
Dropdown
|
||
|
|
<a-menu slot="overlay" @click="handleMenuClick">
|
||
|
|
<a-menu-item key="1">1st menu item</a-menu-item>
|
||
|
|
<a-menu-item key="2">2nd menu item</a-menu-item>
|
||
|
|
<a-menu-item key="3">3rd item</a-menu-item>
|
||
|
|
</a-menu>
|
||
|
|
</a-dropdown-button>
|
||
|
|
<a-dropdown-button
|
||
|
|
@click="handleButtonClick"
|
||
|
|
disabled
|
||
|
|
style="margin-left: 8px"
|
||
|
|
>
|
||
|
|
Dropdown
|
||
|
|
<a-menu slot="overlay" @click="handleMenuClick">
|
||
|
|
<a-menu-item key="1">1st menu item</a-menu-item>
|
||
|
|
<a-menu-item key="2">2nd menu item</a-menu-item>
|
||
|
|
<a-menu-item key="3">3rd item</a-menu-item>
|
||
|
|
</a-menu>
|
||
|
|
</a-dropdown-button>
|
||
|
|
<a-dropdown>
|
||
|
|
<a-menu slot="overlay" @click="handleMenuClick">
|
||
|
|
<a-menu-item key="1">1st menu item</a-menu-item>
|
||
|
|
<a-menu-item key="2">2nd menu item</a-menu-item>
|
||
|
|
<a-menu-item key="3">3rd item</a-menu-item>
|
||
|
|
</a-menu>
|
||
|
|
<a-button style="margin-left: 8px">
|
||
|
|
Button <a-icon type="down" />
|
||
|
|
</a-button>
|
||
|
|
</a-dropdown>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
export default {
|
||
|
|
methods: {
|
||
|
|
handleButtonClick(e) {
|
||
|
|
console.log('click left button', e);
|
||
|
|
},
|
||
|
|
handleMenuClick(e) {
|
||
|
|
console.log('click', e);
|
||
|
|
},
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
```
|