63 lines
2.2 KiB
Markdown
63 lines
2.2 KiB
Markdown
<cn>
|
|
#### 带下拉框的按钮
|
|
左边是按钮，右边是额外的相关功能菜单。可设置 `icon` 属性来修改右边的图标。
|
|
</cn>
|
|
|
|
<us>
|
|
#### Button with dropdown menu
|
|
A button is on the left, and a related functional menu is on the right. You can set the icon property to modify the icon of right.
|
|
</us>
|
|
|
|
```vue
|
|
<template>
|
|
<div>
|
|
<a-dropdown-button @click="handleButtonClick">
|
|
Dropdown
|
|
<a-menu slot="overlay" @click="handleMenuClick">
|
|
<a-menu-item key="1"> <a-icon type="user" />1st menu item </a-menu-item>
|
|
<a-menu-item key="2"> <a-icon type="user" />2nd menu item </a-menu-item>
|
|
<a-menu-item key="3"> <a-icon type="user" />3rd item </a-menu-item>
|
|
</a-menu>
|
|
</a-dropdown-button>
|
|
<a-dropdown-button>
|
|
Dropdown
|
|
<a-menu slot="overlay" @click="handleMenuClick">
|
|
<a-menu-item key="1"> <a-icon type="user" />1st menu item </a-menu-item>
|
|
<a-menu-item key="2"> <a-icon type="user" />2nd menu item </a-menu-item>
|
|
<a-menu-item key="3"> <a-icon type="user" />3rd item </a-menu-item>
|
|
</a-menu>
|
|
<a-icon slot="icon" type="user" />
|
|
</a-dropdown-button>
|
|
<a-dropdown-button disabled style="margin-left: 8px" @click="handleButtonClick">
|
|
Dropdown
|
|
<a-menu slot="overlay" @click="handleMenuClick">
|
|
<a-menu-item key="1"> <a-icon type="user" />1st menu item </a-menu-item>
|
|
<a-menu-item key="2"> <a-icon type="user" />2nd menu item </a-menu-item>
|
|
<a-menu-item key="3"> <a-icon type="user" />3rd item </a-menu-item>
|
|
</a-menu>
|
|
</a-dropdown-button>
|
|
<a-dropdown>
|
|
<a-menu slot="overlay" @click="handleMenuClick">
|
|
<a-menu-item key="1"> <a-icon type="user" />1st menu item </a-menu-item>
|
|
<a-menu-item key="2"> <a-icon type="user" />2nd menu item </a-menu-item>
|
|
<a-menu-item key="3"> <a-icon type="user" />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>
|
|
```
|