feat(components): 为复选框和单选框组件添加只读属性

- 在 CheckBoxProps、RadioProps 和 RadioGroupProps 接口中添加 readonly 属性
- 在 Check、Radio 和 RadioGroup 组件中实现只读逻辑
- 修改 handleClick 和 handleSelect 方法,增加对只读属性的判断
This commit is contained in:
Vixalie
2025-08-24 11:26:06 +08:00
parent 79a7d4c92a
commit df1ccb783f
3 changed files with 10 additions and 3 deletions

View File

@@ -17,6 +17,7 @@ interface CheckBoxProps {
checked?: boolean;
defaultChecked?: boolean;
disabled?: boolean;
readonly?: boolean;
onChange?: (checked?: boolean) => void;
}
@@ -35,6 +36,7 @@ const Check: ParentComponent<CheckBoxProps> = (props) => {
const mProps = mergeProps<ParentProps<CheckBoxProps>[]>(
{
disabled: false,
readonly: false,
},
props,
);
@@ -54,7 +56,7 @@ const Check: ParentComponent<CheckBoxProps> = (props) => {
});
const handleClick = () => {
if (mProps.disabled) {
if (mProps.disabled || mProps.readonly) {
return;
}
setInternalChecked((prev) => !prev);

View File

@@ -17,6 +17,7 @@ interface RadioProps {
checked?: boolean;
defaultChecked?: boolean;
disabled?: boolean;
readonly?: boolean;
onChange?: (value?: boolean) => void;
}
@@ -35,6 +36,7 @@ const Radio: ParentComponent<RadioProps> = (props) => {
const mProps = mergeProps<ParentProps<RadioProps>[]>(
{
disabled: false,
readonly: false,
},
props,
);
@@ -54,7 +56,7 @@ const Radio: ParentComponent<RadioProps> = (props) => {
});
const handleClick = () => {
if (mProps.disabled) {
if (mProps.disabled || mProps.readonly) {
return;
}
setInternalChecked((prev) => !prev);

View File

@@ -23,6 +23,7 @@ interface RadioGroupProps {
value?: Option['value'];
defalutValue?: Option['value'];
disabled?: boolean;
readonly?: boolean;
onChange?: (value?: Option['value']) => void;
}
@@ -31,6 +32,7 @@ const RadioGroup: Component<RadioGroupProps> = (props) => {
{
options: [],
disabled: false,
readonly: false,
},
props,
);
@@ -50,7 +52,7 @@ const RadioGroup: Component<RadioGroupProps> = (props) => {
});
const handleSelect = (value: Option['value']) => {
if (mProps.disabled) {
if (mProps.disabled || mProps.readonly) {
return;
}
setSelectedValue(value);
@@ -64,6 +66,7 @@ const RadioGroup: Component<RadioGroupProps> = (props) => {
<Radio
checked={selectedValue() === option().value}
disabled={mProps.disabled}
readonly={mProps.readonly}
onChange={() => {
handleSelect(option().value);
}}>