ButtonGroup 按钮组组件
复制链接ButtonGroup 是一个用于聚合多个 MaterialButton 的容器组件。它支持灵活的布局切换、统一的属性默认值配置以及全局事件委托监听。
核心特性
复制链接- 布局自适应：支持水平（Horizontal）和垂直（Vertical）两种排列方式。
- 属性继承与覆盖：可以在组级别设置默认的尺寸、颜色、图标等，也可以在具体的按钮项中进行个性化覆盖。
- 智能类型识别：内置了对
download和normal类型的样式及图标自动匹配逻辑。 - 事件委托：支持统一监听
@click事件，便捷获取点击的项信息及索引。
组件属性 (Props)
复制链接| 属性名 | 类型 | 默认值 | 可选值 | 说明 |
|---|---|---|---|---|
links | ExternalLink[] | [] | - | 按钮配置数组 |
layout | string | "horizontal" | "horizontal", "vertical" | 布局方向 |
size | string | "s" | "xs", "s", "m", "l", "xl" | 默认按钮尺寸 |
color | string | - | - | 默认按钮颜色样式 |
icon | string | - | - | 默认按钮图标 |
target | string | - | - | 默认链接打开方式 |
ariaLabel | string | - | - | 组的无障碍标签 |
组件事件 (Emits)
复制链接| 事件名 | 回调参数 | 说明 |
|---|---|---|
@click | (event: Event, item: ExternalLink, index: number) | 当组内任意按钮被点击时触发 |
按钮配置项 (ExternalLink)
复制链接每一项 links 中的对象支持以下配置：
| 属性名 | 类型 | 说明 |
|---|---|---|
label | string | 按钮显示的文本内容 |
id | string | (可选) 自定义标识符，方便在事件处理中识别 |
link | string | (可选) 点击跳转的链接地址 |
type | string | (可选) 预设类型：download (充满色), normal (色调色) |
icon | string | (可选) 覆盖组设置的图标 |
color | string | (可选) 覆盖组设置的颜色 |
size | string | (可选) 覆盖组设置的尺寸 |
target | string | (可选) 覆盖组设置的打开方式 |
ariaLabel | string | (可选) 按钮的无障碍标签 |
onClick | Function | (可选) 单体独立的点击回调函数 |
使用示例
复制链接1. 基础用法 (水平排列)
复制链接vue
<ButtonGroup
:links="[
{ label: '查看详情', id: 'detail' },
{ label: '下载资源', id: 'download', type: 'download' }
]"
@click="(e, item) => console.log('点击了:', item.id)"
/>2. 垂直排列与尺寸控制
复制链接vue
<ButtonGroup
layout="vertical"
size="l"
:links="[
{ label: '选项一', icon: 'settings' },
{ label: '选项二', icon: 'person' }
]"
/>3. 混合图标与文本
复制链接vue
<ButtonGroup
size="m"
:links="[
{ id: 'prev', icon: 'chevron_left', ariaLabel: '上一页' },
{ id: 'index', label: '1 / 5', color: 'tonal' },
{ id: 'next', icon: 'chevron_right', ariaLabel: '下一页' }
]"
/>4. 链接跳转
复制链接vue
<ButtonGroup
target="_blank"
:links="[
{ label: 'GitHub', link: 'https://github.com', icon: 'code' },
{ label: '首页', link: '/', icon: 'home' }
]"
/>