Skip to content

Commit c0bc31f

Browse files
committed
refactor!: 移除 FaRadioGroup 组件的 orientation 属性
1 parent 871dd5c commit c0bc31f

2 files changed

Lines changed: 10 additions & 17 deletions

File tree

‎packages/components/src/radio-group/README.md‎

Lines changed: 7 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,6 @@
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) {
221217
1. **初始化值**:组件当前通过 `v-model` 管理选中值,不再提供 `defaultValue`
222218
2. **选项结构**`options` 至少需要 `label``value` 两个字段。
223219
3. **禁用优先级**:组件整体 `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` 中,点击文字区域也能切换选中状态。

‎packages/components/src/radio-group/index.vue‎

Lines changed: 3 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -17,17 +17,14 @@ defineOptions({
1717
name: 'FaRadioGroup',
1818
})
1919
20-
const props = withDefaults(defineProps<{
20+
const props = defineProps<{
2121
options: RadioGroupOption[]
2222
disabled?: RadioGroupRootProps['disabled']
23-
orientation?: RadioGroupRootProps['orientation']
2423
dir?: RadioGroupRootProps['dir']
2524
class?: HTMLAttributes['class']
2625
optionClass?: HTMLAttributes['class']
2726
itemClass?: HTMLAttributes['class']
28-
}>(), {
29-
orientation: 'vertical',
30-
})
27+
}>()
3128
3229
const emit = defineEmits<{
3330
change: [value: AcceptableValue | undefined]
@@ -76,7 +73,6 @@ function isOptionChecked(option: RadioGroupOption) {
7673
<RadioGroup
7774
v-model="value"
7875
:disabled="disabled"
79-
:orientation="orientation"
8076
:dir="dir"
8177
:class="props.class"
8278
>
@@ -85,7 +81,7 @@ function isOptionChecked(option: RadioGroupOption) {
8581
:key="getOptionKey(option, index)"
8682
:class="
8783
cn(
88-
'flex gap-3',
84+
'flex gap-2',
8985
option.description ? 'items-start' : 'items-center',
9086
props.optionClass,
9187
)

0 commit comments

Comments
 (0)