feat(components): 添加默认选中功能
- 在 Check、Radio、RadioGroup 和 Segments 组件中添加默认选中值属性 - 使用 onMount 在组件挂载时设置默认选中值 - 优化了组件的初始化逻辑,确保默认值能够正确显示
This commit is contained in:
@@ -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());
|
||||||
|
@@ -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());
|
||||||
|
@@ -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());
|
||||||
|
@@ -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());
|
||||||
|
Reference in New Issue
Block a user