feat(components): 添加默认选中功能

- 在 Check、Radio、RadioGroup 和 Segments 组件中添加默认选中值属性
- 使用 onMount 在组件挂载时设置默认选中值
- 优化了组件的初始化逻辑,确保默认值能够正确显示
This commit is contained in:
Vixalie
2025-08-13 22:48:01 +08:00
parent 727fb43791
commit 5523047b69
4 changed files with 28 additions and 0 deletions

View File

@@ -5,6 +5,7 @@ import {
createMemo, createMemo,
createSignal, createSignal,
mergeProps, mergeProps,
onMount,
ParentComponent, ParentComponent,
ParentProps, ParentProps,
Show, Show,
@@ -14,6 +15,7 @@ import { Dynamic } from 'solid-js/web';
interface CheckBoxProps { interface CheckBoxProps {
name?: string; name?: string;
checked?: boolean; checked?: boolean;
defaultChecked?: boolean;
disabled?: boolean; disabled?: boolean;
onChange?: (checked?: boolean) => void; onChange?: (checked?: boolean) => void;
} }
@@ -40,6 +42,11 @@ const Check: ParentComponent<CheckBoxProps> = (props) => {
const originalChecked = createMemo(() => mProps.checked); const originalChecked = createMemo(() => mProps.checked);
const [internalChecked, setInternalChecked] = createSignal<boolean | undefined>(undefined); const [internalChecked, setInternalChecked] = createSignal<boolean | undefined>(undefined);
onMount(() => {
if (isNotNil(mProps.defaultChecked)) {
setInternalChecked(mProps.defaultChecked);
}
});
createEffect(() => { createEffect(() => {
if (isNotNil(originalChecked()) && originalChecked() !== internalChecked()) { if (isNotNil(originalChecked()) && originalChecked() !== internalChecked()) {
setInternalChecked(originalChecked()); setInternalChecked(originalChecked());

View File

@@ -5,6 +5,7 @@ import {
createMemo, createMemo,
createSignal, createSignal,
mergeProps, mergeProps,
onMount,
ParentComponent, ParentComponent,
ParentProps, ParentProps,
Show, Show,
@@ -14,6 +15,7 @@ import { Dynamic } from 'solid-js/web';
interface RadioProps { interface RadioProps {
name?: string; name?: string;
checked?: boolean; checked?: boolean;
defaultChecked?: boolean;
disabled?: boolean; disabled?: boolean;
onChange?: (value?: boolean) => void; onChange?: (value?: boolean) => void;
} }
@@ -40,6 +42,11 @@ const Radio: ParentComponent<RadioProps> = (props) => {
const originalChecked = createMemo(() => mProps.checked); const originalChecked = createMemo(() => mProps.checked);
const [internalChecked, setInternalChecked] = createSignal<boolean | undefined>(undefined); const [internalChecked, setInternalChecked] = createSignal<boolean | undefined>(undefined);
onMount(() => {
if (isNotNil(mProps.defaultChecked)) {
setInternalChecked(mProps.defaultChecked);
}
});
createEffect(() => { createEffect(() => {
if (isNotNil(originalChecked()) && originalChecked() !== internalChecked()) { if (isNotNil(originalChecked()) && originalChecked() !== internalChecked()) {
setInternalChecked(originalChecked()); setInternalChecked(originalChecked());

View File

@@ -7,6 +7,7 @@ import {
Index, Index,
JSX, JSX,
mergeProps, mergeProps,
onMount,
Show, Show,
} from 'solid-js'; } from 'solid-js';
import Radio from './Radio'; import Radio from './Radio';
@@ -20,6 +21,7 @@ interface RadioGroupProps {
name?: string; name?: string;
options?: Option[]; options?: Option[];
value?: Option['value']; value?: Option['value'];
defalutValue?: Option['value'];
disabled?: boolean; disabled?: boolean;
onChange?: (value?: Option['value']) => void; onChange?: (value?: Option['value']) => void;
} }
@@ -36,6 +38,11 @@ const RadioGroup: Component<RadioGroupProps> = (props) => {
const originalValue = createMemo(() => mProps.value); const originalValue = createMemo(() => mProps.value);
const [selectedValue, setSelectedValue] = createSignal<Option['value'] | undefined>(undefined); const [selectedValue, setSelectedValue] = createSignal<Option['value'] | undefined>(undefined);
onMount(() => {
if (isNotNil(mProps.defalutValue)) {
setSelectedValue(mProps.defalutValue);
}
});
createEffect(() => { createEffect(() => {
if (isNotNil(originalValue()) && originalValue() !== selectedValue()) { if (isNotNil(originalValue()) && originalValue() !== selectedValue()) {
setSelectedValue(originalValue()); setSelectedValue(originalValue());

View File

@@ -8,6 +8,7 @@ import {
Index, Index,
JSX, JSX,
mergeProps, mergeProps,
onMount,
Show, Show,
} from 'solid-js'; } from 'solid-js';
@@ -20,6 +21,7 @@ interface SegmentsProps {
name?: string; name?: string;
options: Option[]; options: Option[];
value?: Option['value']; value?: Option['value'];
defaultValue?: Option['value'];
direction?: 'horizontal' | 'vertical'; direction?: 'horizontal' | 'vertical';
disabled?: boolean; disabled?: boolean;
onChange?: (value: Option['value'] | undefined) => void; onChange?: (value: Option['value'] | undefined) => void;
@@ -43,6 +45,11 @@ const Segments: Component<SegmentsProps> = (props) => {
const [indicatorHeight, setIndicatorHeight] = createSignal(0); const [indicatorHeight, setIndicatorHeight] = createSignal(0);
const [indicatorWidth, setIndicatorWidth] = createSignal(0); const [indicatorWidth, setIndicatorWidth] = createSignal(0);
onMount(() => {
if (isNotNil(mProps.defaultValue)) {
setSelected(mProps.defaultValue);
}
});
createEffect(() => { createEffect(() => {
if (isNotNil(originalValue()) && originalValue() !== selected()) { if (isNotNil(originalValue()) && originalValue() !== selected()) {
setSelected(originalValue()); setSelected(originalValue());