133 lines
3.2 KiB
Vue
133 lines
3.2 KiB
Vue
<docs>
|
||
---
|
||
order: 5
|
||
title:
|
||
zh-CN: 带下拉框的按钮
|
||
en-US: Button with dropdown menu
|
||
---
|
||
|
||
## zh-CN
|
||
|
||
左边是按钮，右边是额外的相关功能菜单。可设置 `icon` 属性来修改右边的图标。
|
||
|
||
## en-US
|
||
|
||
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.
|
||
|
||
</docs>
|
||
|
||
<template>
|
||
<div class="demo-dropdown-wrap">
|
||
<a-dropdown-button @click="handleButtonClick">
|
||
Dropdown
|
||
<template #overlay>
|
||
<a-menu @click="handleMenuClick">
|
||
<a-menu-item key="1">
|
||
<UserOutlined />
|
||
1st menu item
|
||
</a-menu-item>
|
||
<a-menu-item key="2">
|
||
<UserOutlined />
|
||
2nd menu item
|
||
</a-menu-item>
|
||
<a-menu-item key="3">
|
||
<UserOutlined />
|
||
3rd item
|
||
</a-menu-item>
|
||
</a-menu>
|
||
</template>
|
||
</a-dropdown-button>
|
||
<a-dropdown-button>
|
||
Dropdown
|
||
<template #overlay>
|
||
<a-menu @click="handleMenuClick">
|
||
<a-menu-item key="1">
|
||
<UserOutlined />
|
||
1st menu item
|
||
</a-menu-item>
|
||
<a-menu-item key="2">
|
||
<UserOutlined />
|
||
2nd menu item
|
||
</a-menu-item>
|
||
<a-menu-item key="3">
|
||
<UserOutlined />
|
||
3rd item
|
||
</a-menu-item>
|
||
</a-menu>
|
||
</template>
|
||
<template #icon><UserOutlined /></template>
|
||
</a-dropdown-button>
|
||
<a-dropdown-button disabled @click="handleButtonClick">
|
||
Dropdown
|
||
<template #overlay>
|
||
<a-menu @click="handleMenuClick">
|
||
<a-menu-item key="1">
|
||
<UserOutlined />
|
||
1st menu item
|
||
</a-menu-item>
|
||
<a-menu-item key="2">
|
||
<UserOutlined />
|
||
2nd menu item
|
||
</a-menu-item>
|
||
<a-menu-item key="3">
|
||
<UserOutlined />
|
||
3rd item
|
||
</a-menu-item>
|
||
</a-menu>
|
||
</template>
|
||
</a-dropdown-button>
|
||
<a-dropdown>
|
||
<template #overlay>
|
||
<a-menu @click="handleMenuClick">
|
||
<a-menu-item key="1">
|
||
<UserOutlined />
|
||
1st menu item
|
||
</a-menu-item>
|
||
<a-menu-item key="2">
|
||
<UserOutlined />
|
||
2nd menu item
|
||
</a-menu-item>
|
||
<a-menu-item key="3">
|
||
<UserOutlined />
|
||
3rd item
|
||
</a-menu-item>
|
||
</a-menu>
|
||
</template>
|
||
<a-button>
|
||
Button
|
||
<DownOutlined />
|
||
</a-button>
|
||
</a-dropdown>
|
||
</div>
|
||
</template>
|
||
<script lang="ts">
|
||
import { defineComponent } from 'vue';
|
||
import { UserOutlined, DownOutlined } from '@ant-design/icons-vue';
|
||
import type { MenuProps } from 'ant-design-vue';
|
||
|
||
export default defineComponent({
|
||
components: {
|
||
UserOutlined,
|
||
DownOutlined,
|
||
},
|
||
setup() {
|
||
const handleButtonClick = (e: Event) => {
|
||
console.log('click left button', e);
|
||
};
|
||
const handleMenuClick: MenuProps['onClick'] = e => {
|
||
console.log('click', e);
|
||
};
|
||
return {
|
||
handleButtonClick,
|
||
handleMenuClick,
|
||
};
|
||
},
|
||
});
|
||
</script>
|
||
<style lang="less" scoped>
|
||
.demo-dropdown-wrap :deep(.ant-dropdown-button) {
|
||
margin-right: 8px;
|
||
margin-bottom: 8px;
|
||
}
|
||
</style>
|