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

36 lines
998 B
Markdown
Raw Normal View History

2018-01-24 22:53:45 +08:00
<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>
2019-10-09 18:32:23 +08:00
```tpl
2018-01-24 22:53:45 +08:00
<template>
<div>
<a-button type="primary">Primary</a-button>
2018-02-27 12:17:53 +08:00
<a-button>secondary</a-button>
2018-04-11 13:32:18 +08:00
<a-dropdown>
2018-02-27 12:17:53 +08:00
<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>
2019-09-28 20:45:07 +08:00
<a-button> Actions <a-icon type="down" /> </a-button>
2018-02-27 12:17:53 +08:00
</a-dropdown>
2018-01-24 22:53:45 +08:00
</div>
</template>
2018-02-27 12:17:53 +08:00
<script>
2019-09-28 20:45:07 +08:00
export default {
methods: {
handleMenuClick(e) {
console.log('click', e);
},
},
};
2018-02-27 12:17:53 +08:00
</script>
2018-01-24 22:53:45 +08:00
```