1616| ------| ------| --------| ------|
1717| ` options ` | ` RadioGroupOption[] ` | ** 必需** | 单选组选项数据 |
1818| ` disabled ` | ` boolean ` | ` false ` | 是否整体禁用 |
19- | ` orientation ` | ` 'horizontal' \| 'vertical' ` | ` 'vertical' ` | 排列方向 |
2019| ` dir ` | ` 'ltr' \| 'rtl' ` | - | 文本方向 |
2120| ` class ` | ` HTMLAttributes['class'] ` | - | 单选组容器类名 |
2221| ` optionClass ` | ` HTMLAttributes['class'] ` | - | 每个选项外层容器类名 |
@@ -116,7 +115,7 @@ const options = [
116115</template>
117116```
118117
119- ### 横向排列
118+ ### 多列排列
120119
121120``` vue
122121<script setup lang="ts">
@@ -132,9 +131,8 @@ const options = [
132131<template>
133132 <FaRadioGroup
134133 v-model="value"
135- orientation="horizontal"
136134 :options="options"
137- class="gap-4"
135+ class="gap-4 md:grid-cols-3 "
138136 />
139137</template>
140138```
@@ -167,10 +165,8 @@ const options = [
167165<template>
168166 <FaRadioGroup
169167 v-model="value"
170- orientation="horizontal"
171168 :options="options"
172- class="gap-4"
173- option-class="w-full sm:w-[260px]"
169+ class="gap-4 md:grid-cols-3"
174170 >
175171 <template #option="{ option, checked }">
176172 <div
@@ -221,6 +217,7 @@ function handleChange(value) {
2212171 . ** 初始化值** :组件当前通过 ` v-model ` 管理选中值,不再提供 ` defaultValue ` 。
2222182 . ** 选项结构** :` options ` 至少需要 ` label ` 和 ` value ` 两个字段。
2232193 . ** 禁用优先级** :组件整体 ` disabled ` 为 ` true ` 时,会覆盖单项可用状态。
224- 4 . ** 描述文案布局** :存在 ` description ` 时,选项会自动切换为顶部对齐布局。
225- 5 . ** 自定义插槽** :使用 ` option ` 插槽后,默认 ` RadioGroupItem ` 会隐藏,需要由插槽内容自行承担完整视觉表现。
226- 6 . ** 点击区域** :默认选项内容包裹在 ` Label ` 中,点击文字区域也能切换选中状态。
220+ 4 . ** 布局控制** :通过 ` class ` 和 ` optionClass ` 自定义多列或卡片式排列,不再提供 ` orientation ` 。
221+ 5 . ** 描述文案布局** :存在 ` description ` 时,选项会自动切换为顶部对齐布局。
222+ 6 . ** 自定义插槽** :使用 ` option ` 插槽后,默认 ` RadioGroupItem ` 会隐藏,需要由插槽内容自行承担完整视觉表现。
223+ 7 . ** 点击区域** :默认选项内容包裹在 ` Label ` 中,点击文字区域也能切换选中状态。
0 commit comments