# 4.2 按钮组（Button Group）
按钮组组件，用于展示一组可选按钮
# 基础用法
<template>
<dof-button-group
:btn-group="btnGroup"
:select-index="selectIndex"
@dofGroupButtonClicked="onGroupButtonClicked"
/>
</template>
<script>
export default {
data() {
return {
btnGroup: ['选项1', '选项2', '选项3'],
selectIndex: 0,
}
},
methods: {
onGroupButtonClicked(index) {
this.selectIndex = index
},
},
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
# Attributes
| Prop | Type | Required | Default | Description |
|---|---|---|---|---|
btn-group | Array | N | [] | 按钮组数据 |
bg-color | String | N | #FFFFFF | 背景颜色 |
select-index | Number | N | 0 | 当前选中索引 |
size | String | N | full | 尺寸 |
disabled | Boolean | N | false | 是否禁用 |
need-dark-mode | Boolean | N | false | 是否启用 M-dark/T-dark 内置暗黑适配 |
isRTL | Boolean | N | false | 是否启用 RTL（从右到左）布局；默认关闭 ^2.5.10 |
设置 :need-dark-mode="true" 可启用内置暗黑配色，主题初始化与构建配置见 接入说明。
# Events
| 事件名 | 说明 | 回调参数 |
|---|---|---|
dofGroupButtonClicked | 选中项点击事件 | index |