Skip to content

Commit 89149a7

Browse files
yangbai1991yangbai1991
authored
feat(radiogroup): support readonly props (#3470)
* feat(radiogroup): support readonly props * feat: update docs
1 parent 14dd921 commit 89149a7

File tree

8 files changed

+42
-18
lines changed

8 files changed

+42
-18
lines changed

‎src/radio-group/props.ts

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -39,11 +39,16 @@ const props: TdRadioGroupProps = {
3939
options: {
4040
type: Array,
4141
},
42-
/** 复选框和内容相对位置 */
42+
/** 复选框和内容相对位置。优先级低于 Radio.placement */
4343
placement: {
4444
type: String,
4545
value: 'left',
4646
},
47+
/** 只读状态 */
48+
readonly: {
49+
type: null,
50+
value: undefined,
51+
},
4752
/** 选中的值 */
4853
value: {
4954
type: null,

‎src/radio-group/radio-group.ts

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -19,11 +19,12 @@ export default class RadioGroup extends SuperComponent {
1919
'../radio/radio': {
2020
type: 'descendant',
2121
linked(target) {
22-
const { value, disabled } = this.data;
22+
const { value, disabled, readonly } = this.data;
2323
target.setData({
2424
checked: value === target.data.value,
2525
});
2626
target.setDisabled(disabled);
27+
target.setReadonly(readonly);
2728
},
2829
},
2930
};
@@ -82,7 +83,7 @@ export default class RadioGroup extends SuperComponent {
8283

8384
// 支持自定义options
8485
initWithOptions() {
85-
const { options, value, keys, disabled } = this.data;
86+
const { options, value, keys, disabled, readonly } = this.data;
8687
// 数字数组｜字符串数组｜对像数组
8788
if (!options?.length || !Array.isArray(options)) {
8889
this.setData({
@@ -100,6 +101,7 @@ export default class RadioGroup extends SuperComponent {
100101
value: element,
101102
checked: value === element,
102103
disabled,
104+
readonly,
103105
});
104106
} else if (typeName === 'object') {
105107
optionsValue.push({
@@ -108,6 +110,7 @@ export default class RadioGroup extends SuperComponent {
108110
value: element[keys?.value ?? 'value'],
109111
checked: value === element[keys?.value ?? 'value'],
110112
disabled: element.disabled || disabled,
113+
readonly: element.readonly || readonly,
111114
});
112115
}
113116
});

‎src/radio-group/type.ts

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -61,13 +61,20 @@ export interface TdRadioGroupProps<T = RadioValue> {
6161
value?: Array<RadioOption>;
6262
};
6363
/**
64-
* 复选框和内容相对位置
64+
* 复选框和内容相对位置。优先级低于 Radio.placement
6565
* @default left
6666
*/
6767
placement?: {
6868
type: StringConstructor;
6969
value?: 'left' | 'right';
7070
};
71+
/**
72+
* 只读状态
73+
*/
74+
readonly?: {
75+
type: BooleanConstructor;
76+
value?: boolean;
77+
};
7178
/**
7279
* 选中的值
7380
*/

‎src/radio/README.en-US.md

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -20,8 +20,8 @@ label | String / Slot | - | [see more ts definition](https://github.com/Tencent/
2020
max-content-row | Number | 5 | \- | N
2121
max-label-row | Number | 3 | \- | N
2222
name | String | - | \- | N
23-
placement | String | left | options: left/right | N
24-
readonly | Boolean | false | \- | N
23+
placement | String | - | options: left/right | N
24+
readonly | Boolean | undefined | \- | N
2525
value | String / Number / Boolean | false | Typescript：`T` `type RadioValue = string \| number \| boolean`。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/radio/type.ts) | N
2626

2727
### Radio Events
@@ -55,6 +55,7 @@ keys | Object | - | Typescript：`KeysType`。[see more ts definition](https://g
5555
name | String | - | \- | N
5656
options | Array | - | Typescript：`Array<RadioOption>` `type RadioOption = string \| number \| RadioOptionObj` `interface RadioOptionObj { label?: string; value?: string \| number; readonly?: boolean; disabled?: boolean; allowUncheck?: boolean; }`。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/radio-group/type.ts) | N
5757
placement | String | left | options: left/right | N
58+
readonly | Boolean | undefined | \- | N
5859
value | String / Number / Boolean | - | Typescript：`T` `type RadioValue = string \| number \| boolean`。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/radio-group/type.ts) | N
5960
default-value | String / Number / Boolean | undefined | uncontrolled property。Typescript：`T` `type RadioValue = string \| number \| boolean`。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/radio-group/type.ts) | N
6061

‎src/radio/README.md

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -73,8 +73,8 @@ label | String / Slot | - | 主文案。[通用类型定义](https://github.com/
7373
max-content-row | Number | 5 | 内容最大行数限制 | N
7474
max-label-row | Number | 3 | 主文案最大行数限制 | N
7575
name | String | - | HTML 元素原生属性 | N
76-
placement | String | left | 复选框和内容相对位置。可选项：left/right | N
77-
readonly | Boolean | false | 只读状态 | N
76+
placement | String | - | 复选框和内容相对位置。优先级高于 RadioGroup.placement。Radio 单独存在时，默认值为 left。如果父组件存在 RadioGroup，默认值便由 RadioGroup.placement 决定。可选项：left/right | N
77+
readonly | Boolean | undefined | 只读状态 | N
7878
value | String / Number / Boolean | false | 单选按钮的值。TS 类型：`T` `type RadioValue = string \| number \| boolean`。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/radio/type.ts) | N
7979

8080
### Radio Events
@@ -107,7 +107,8 @@ icon | String / Array | 'circle' | 自定义选中图标和非选中图标。示
107107
keys | Object | - | 用来定义 value / label 在 `options` 中对应的字段别名。TS 类型：`KeysType`。[通用类型定义](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/common/common.ts) | N
108108
name | String | - | HTML 元素原生属性 | N
109109
options | Array | - | 单选组件按钮形式。RadioOption 数据类型为 string 或 number 时，表示 label 和 value 值相同。TS 类型：`Array<RadioOption>` `type RadioOption = string \| number \| RadioOptionObj` `interface RadioOptionObj { label?: string; value?: string \| number; readonly?: boolean; disabled?: boolean; allowUncheck?: boolean; }`。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/radio-group/type.ts) | N
110-
placement | String | left | 复选框和内容相对位置。可选项：left/right | N
110+
placement | String | left | 复选框和内容相对位置。优先级低于 Radio.placement。可选项：left/right | N
111+
readonly | Boolean | undefined | 只读状态 | N
111112
value | String / Number / Boolean | - | 选中的值。TS 类型：`T` `type RadioValue = string \| number \| boolean`。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/radio-group/type.ts) | N
112113
default-value | String / Number / Boolean | undefined | 选中的值。非受控属性。TS 类型：`T` `type RadioValue = string \| number \| boolean`。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/radio-group/type.ts) | N
113114

‎src/radio/props.ts

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -64,15 +64,14 @@ const props: TdRadioProps = {
6464
type: String,
6565
value: '',
6666
},
67-
/** 复选框和内容相对位置 */
67+
/** 复选框和内容相对位置。优先级高于 RadioGroup.placement。Radio 单独存在时，默认值为 left。如果父组件存在 RadioGroup，默认值便由 RadioGroup.placement 决定 */
6868
placement: {
6969
type: String,
70-
value: 'left',
7170
},
7271
/** 只读状态 */
7372
readonly: {
74-
type: Boolean,
75-
value: false,
73+
type: null,
74+
value: undefined,
7675
},
7776
/** 单选按钮的值 */
7877
value: {

‎src/radio/radio.ts

Lines changed: 12 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -65,20 +65,24 @@ export default class Radio extends SuperComponent {
6565
iconVal: [],
6666
_placement: '',
6767
_disabled: false,
68+
_readonly: false,
6869
};
6970

7071
observers = {
7172
disabled(v) {
7273
this.setData({ _disabled: v });
7374
},
75+
readonly(v) {
76+
this.setData({ _readonly: v });
77+
},
7478
};
7579

7680
methods = {
7781
handleTap(e) {
78-
const { _disabled, readonly, contentDisabled } = this.data;
82+
const { _disabled, _readonly, contentDisabled } = this.data;
7983
const { target } = e.currentTarget.dataset;
8084

81-
if (_disabled || readonly || (target === 'text' && contentDisabled)) return;
85+
if (_disabled || _readonly || (target === 'text' && contentDisabled)) return;
8286

8387
this.doChange();
8488
},
@@ -110,5 +114,11 @@ export default class Radio extends SuperComponent {
110114
_disabled: this.data.disabled || disabled,
111115
});
112116
},
117+
118+
setReadonly(readonly: Boolean) {
119+
this.setData({
120+
_readonly: this.data.readonly || readonly,
121+
});
122+
},
113123
};
114124
}

‎src/radio/type.ts

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -99,16 +99,14 @@ export interface TdRadioProps<T = RadioValue> {
9999
value?: string;
100100
};
101101
/**
102-
* 复选框和内容相对位置
103-
* @default left
102+
* 复选框和内容相对位置。优先级高于 RadioGroup.placement。Radio 单独存在时，默认值为 left。如果父组件存在 RadioGroup，默认值便由 RadioGroup.placement 决定
104103
*/
105104
placement?: {
106105
type: StringConstructor;
107106
value?: 'left' | 'right';
108107
};
109108
/**
110109
* 只读状态
111-
* @default false
112110
*/
113111
readonly?: {
114112
type: BooleanConstructor;

0 commit comments

Comments
 (0)