ant-design-vue/components/button/demo/multiple.md

38 lines
1011 B
Markdown
Raw Blame History

This file contains ambiguous Unicode characters!

This file contains ambiguous Unicode characters that may be confused with others in your current locale. If your use case is intentional and legitimate, you can safely ignore this warning. Use the Escape button to highlight these characters.

<cn>
#### 多个按钮组合
按钮组合使用时推荐使用1个主操作 + n 个次操作3个以上操作时把更多操作放到 `Dropdown.Button` 中组合使用。
</cn>
<us>
#### Multiple Buttons
If you need several buttons, we recommend that you use 1 primary button + n secondary buttons, and if there are more than three operations, you can group some of them into `Dropdown.Button`.
</us>
```html
<template>
<div>
<a-button type="primary">Primary</a-button>
<a-button>secondary</a-button>
<a-dropdown overlay={menu}>
<a-menu slot="overlay" @click="handleMenuClick">
<a-menu-item key="1">1st item</a-menu-item>
<a-menu-item key="2">2nd item</a-menu-item>
<a-menu-item key="3">3rd item</a-menu-item>
</a-menu>
<a-button>
Actions <a-icon type="down" />
</a-button>
</a-dropdown>
</div>
</template>
<script>
export default {
methods: {
handleMenuClick(e) {
console.log('click', e);
}
}
}
</script>
```