You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
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.
< docs >
-- -
order : 5
title :
zh - CN : 多个按钮组合
en - US : Multiple Buttons
-- -
# # zh - CN
按钮组合使用时 ， 推荐使用 1 个主操作 + n 个次操作 ， 3 个以上操作时把更多操作放到 [ Dropdown . Button ] ( / c o m p o n e n t s / d r o p d o w n / # c o m p o n e n t s - d r o p d o w n - d e m o - d r o p d o w n - b u t t o n ) 中 组 合 使 用 。
# # en - US
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 ] ( / c o m p o n e n t s / d r o p d o w n / # c o m p o n e n t s - d r o p d o w n - d e m o - d r o p d o w n - b u t t o n ) .
< / docs >
< template >
< a -button type = "primary" > Primary < / a - b u t t o n >
< a -button > secondary < / a - b u t t o n >
< a -dropdown >
< template # overlay >
< a -menu @click ="handleMenuClick" >
< a -menu -item key = "1" > 1 st item < / a - m e n u - i t e m >
< a -menu -item key = "2" > 2 nd item < / a - m e n u - i t e m >
< a -menu -item key = "3" > 3 rd item < / a - m e n u - i t e m >
< / a - m e n u >
< / template >
< a -button >
Actions
< DownOutlined / >
< / a - b u t t o n >
< / a - d r o p d o w n >
< / template >
< script lang = "ts" >
import { DownOutlined } from '@ant-design/icons-vue' ;
import type { MenuProps } from 'ant-design-vue' ;
import { defineComponent } from 'vue' ;
export default defineComponent ( {
components : {
DownOutlined ,
} ,
setup ( ) {
const handleMenuClick : MenuProps [ 'onClick' ] = e => {
console . log ( 'click' , e ) ;
} ;
return {
handleMenuClick ,
} ;
} ,
} ) ;
< / script >
