refactor!: 移除 FaRadioGroup 组件的 orientation 属性

This commit is contained in:
Hooray
2026-04-29 15:46:36 +08:00
parent 871dd5c56f
commit c0bc31f7f4
2 changed files with 10 additions and 17 deletions
+7 -10
View File
@@ -16,7 +16,6 @@
|------|------|--------|------|
| `options` | `RadioGroupOption[]` | **必需** | 单选组选项数据 |
| `disabled` | `boolean` | `false` | 是否整体禁用 |
| `orientation` | `'horizontal' \| 'vertical'` | `'vertical'` | 排列方向 |
| `dir` | `'ltr' \| 'rtl'` | - | 文本方向 |
| `class` | `HTMLAttributes['class']` | - | 单选组容器类名 |
| `optionClass` | `HTMLAttributes['class']` | - | 每个选项外层容器类名 |
@@ -116,7 +115,7 @@ const options = [
</template>
```
### 横向排列
### 多列排列
```vue
<script setup lang="ts">
@@ -132,9 +131,8 @@ const options = [
<template>
<FaRadioGroup
v-model="value"
orientation="horizontal"
:options="options"
class="gap-4"
class="gap-4 md:grid-cols-3"
/>
</template>
```
@@ -167,10 +165,8 @@ const options = [
<template>
<FaRadioGroup
v-model="value"
orientation="horizontal"
:options="options"
class="gap-4"
option-class="w-full sm:w-[260px]"
class="gap-4 md:grid-cols-3"
>
<template #option="{ option, checked }">
<div
@@ -221,6 +217,7 @@ function handleChange(value) {
1. **初始化值**:组件当前通过 `v-model` 管理选中值,不再提供 `defaultValue`。
2. **选项结构**:`options` 至少需要 `label` 和 `value` 两个字段。
3. **禁用优先级**:组件整体 `disabled` 为 `true` 时,会覆盖单项可用状态。
4. **描述文案布局**:存在 `description` 时,选项会自动切换为顶部对齐布局。
5. **自定义插槽**:使用 `option` 插槽后,默认 `RadioGroupItem` 会隐藏,需要由插槽内容自行承担完整视觉表现。
6. **点击区域**:默认选项内容包裹在 `Label` 中,点击文字区域也能切换选中状态。
4. **布局控制**:通过 `class` 和 `optionClass` 自定义多列或卡片式排列,不再提供 `orientation`。
5. **描述文案布局**:存在 `description` 时,选项会自动切换为顶部对齐布局。
6. **自定义插槽**:使用 `option` 插槽后,默认 `RadioGroupItem` 会隐藏,需要由插槽内容自行承担完整视觉表现。
7. **点击区域**:默认选项内容包裹在 `Label` 中,点击文字区域也能切换选中状态。
@@ -17,17 +17,14 @@ defineOptions({
name: 'FaRadioGroup',
})
const props = withDefaults(defineProps<{
const props = defineProps<{
options: RadioGroupOption[]
disabled?: RadioGroupRootProps['disabled']
orientation?: RadioGroupRootProps['orientation']
dir?: RadioGroupRootProps['dir']
class?: HTMLAttributes['class']
optionClass?: HTMLAttributes['class']
itemClass?: HTMLAttributes['class']
}>(), {
orientation: 'vertical',
})
}>()
const emit = defineEmits<{
change: [value: AcceptableValue | undefined]
@@ -76,7 +73,6 @@ function isOptionChecked(option: RadioGroupOption) {
<RadioGroup
v-model="value"
:disabled="disabled"
:orientation="orientation"
:dir="dir"
:class="props.class"
>
@@ -85,7 +81,7 @@ function isOptionChecked(option: RadioGroupOption) {
:key="getOptionKey(option, index)"
:class="
cn(
'flex gap-3',
'flex gap-2',
option.description ? 'items-start' : 'items-center',
props.optionClass,
)