From 29fe655c59f6be14f90c1d1f7566ddcbf107637b Mon Sep 17 00:00:00 2001 From: baiyang Date: Thu, 23 Jan 2025 15:50:54 +0800 Subject: [PATCH 1/2] feat(radiogroup): support readonly props --- src/radio-group/props.ts | 7 +++++++ src/radio-group/radio-group.ts | 7 +++++-- src/radio-group/type.ts | 7 +++++++ src/radio/radio.ts | 14 ++++++++++++-- 4 files changed, 31 insertions(+), 4 deletions(-) diff --git a/src/radio-group/props.ts b/src/radio-group/props.ts index ae0c936b9..5b53b7c26 100644 --- a/src/radio-group/props.ts +++ b/src/radio-group/props.ts @@ -16,6 +16,13 @@ const props: TdRadioGroupProps = { type: Boolean, value: false, }, + + /** 是否全部子单选框只读 */ + readonly: { + type: null, + value: undefined, + }, + /** 是否禁用全部子单选框 */ disabled: { type: null, diff --git a/src/radio-group/radio-group.ts b/src/radio-group/radio-group.ts index 2f3a44073..9184a05f6 100644 --- a/src/radio-group/radio-group.ts +++ b/src/radio-group/radio-group.ts @@ -19,11 +19,12 @@ export default class RadioGroup extends SuperComponent { '../radio/radio': { type: 'descendant', linked(target) { - const { value, disabled } = this.data; + const { value, disabled, readonly } = this.data; target.setData({ checked: value === target.data.value, }); target.setDisabled(disabled); + target.setReadonly(readonly); }, }, }; @@ -82,7 +83,7 @@ export default class RadioGroup extends SuperComponent { // 支持自定义options initWithOptions() { - const { options, value, keys, disabled } = this.data; + const { options, value, keys, disabled, readonly } = this.data; // 数字数组｜字符串数组｜对像数组 if (!options?.length || !Array.isArray(options)) { this.setData({ @@ -100,6 +101,7 @@ export default class RadioGroup extends SuperComponent { value: element, checked: value === element, disabled, + readonly, }); } else if (typeName === 'object') { optionsValue.push({ @@ -108,6 +110,7 @@ export default class RadioGroup extends SuperComponent { value: element[keys?.value ?? 'value'], checked: value === element[keys?.value ?? 'value'], disabled: element.disabled || disabled, + readonly: element.readonly || readonly, }); } }); diff --git a/src/radio-group/type.ts b/src/radio-group/type.ts index 389fc3482..b337f0a8f 100644 --- a/src/radio-group/type.ts +++ b/src/radio-group/type.ts @@ -23,6 +23,13 @@ export interface TdRadioGroupProps { type: BooleanConstructor; value?: boolean; }; + /** + * 是否全部子单选框只读 + */ + readonly?: { + type: BooleanConstructor; + value?: boolean; + }; /** * 是否禁用全部子单选框 */ diff --git a/src/radio/radio.ts b/src/radio/radio.ts index 262f02c22..6c372992c 100644 --- a/src/radio/radio.ts +++ b/src/radio/radio.ts @@ -65,20 +65,24 @@ export default class Radio extends SuperComponent { iconVal: [], _placement: '', _disabled: false, + _readonly: false, }; observers = { disabled(v) { this.setData({ _disabled: v }); }, + readonly(v) { + this.setData({ _readonly: v }); + }, }; methods = { handleTap(e) { - const { _disabled, readonly, contentDisabled } = this.data; + const { _disabled, _readonly, contentDisabled } = this.data; const { target } = e.currentTarget.dataset; - if (_disabled || readonly || (target === 'text' && contentDisabled)) return; + if (_disabled || _readonly || (target === 'text' && contentDisabled)) return; this.doChange(); }, @@ -110,5 +114,11 @@ export default class Radio extends SuperComponent { _disabled: this.data.disabled || disabled, }); }, + + setReadonly(readonly: Boolean) { + this.setData({ + _readonly: this.data.readonly || readonly, + }); + }, }; } From ed70c3415d1e07c52b5ad0e2271553e93f69f31a Mon Sep 17 00:00:00 2001 From: baiyang Date: Thu, 23 Jan 2025 16:50:18 +0800 Subject: [PATCH 2/2] feat: update docs --- src/radio-group/props.ts | 14 ++++++-------- src/radio-group/type.ts | 16 ++++++++-------- src/radio/README.en-US.md | 5 +++-- src/radio/README.md | 7 ++++--- src/radio/props.ts | 7 +++---- src/radio/type.ts | 4 +--- 6 files changed, 25 insertions(+), 28 deletions(-) diff --git a/src/radio-group/props.ts b/src/radio-group/props.ts index 5b53b7c26..79b5611fa 100644 --- a/src/radio-group/props.ts +++ b/src/radio-group/props.ts @@ -16,13 +16,6 @@ const props: TdRadioGroupProps = { type: Boolean, value: false, }, - - /** 是否全部子单选框只读 */ - readonly: { - type: null, - value: undefined, - }, - /** 是否禁用全部子单选框 */ disabled: { type: null, @@ -46,11 +39,16 @@ const props: TdRadioGroupProps = { options: { type: Array, }, - /** 复选框和内容相对位置 */ + /** 复选框和内容相对位置。优先级低于 Radio.placement */ placement: { type: String, value: 'left', }, + /** 只读状态 */ + readonly: { + type: null, + value: undefined, + }, /** 选中的值 */ value: { type: null, diff --git a/src/radio-group/type.ts b/src/radio-group/type.ts index b337f0a8f..904c7a2bd 100644 --- a/src/radio-group/type.ts +++ b/src/radio-group/type.ts @@ -23,13 +23,6 @@ export interface TdRadioGroupProps { type: BooleanConstructor; value?: boolean; }; - /** - * 是否全部子单选框只读 - */ - readonly?: { - type: BooleanConstructor; - value?: boolean; - }; /** * 是否禁用全部子单选框 */ @@ -68,13 +61,20 @@ export interface TdRadioGroupProps { value?: Array; }; /** - * 复选框和内容相对位置 + * 复选框和内容相对位置。优先级低于 Radio.placement * @default left */ placement?: { type: StringConstructor; value?: 'left' | 'right'; }; + /** + * 只读状态 + */ + readonly?: { + type: BooleanConstructor; + value?: boolean; + }; /** * 选中的值 */ diff --git a/src/radio/README.en-US.md b/src/radio/README.en-US.md index 2ca4ba39b..638511aa8 100644 --- a/src/radio/README.en-US.md +++ b/src/radio/README.en-US.md @@ -20,8 +20,8 @@ label | String / Slot | - | [see more ts definition](https://github.com/Tencent/ max-content-row | Number | 5 | \- | N max-label-row | Number | 3 | \- | N name | String | - | \- | N -placement | String | left | options: left/right | N -readonly | Boolean | false | \- | N +placement | String | - | options: left/right | N +readonly | Boolean | undefined | \- | N 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 ### Radio Events @@ -55,6 +55,7 @@ keys | Object | - | Typescript：`KeysType`。[see more ts definition](https://g name | String | - | \- | N options | Array | - | Typescript：`Array` `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 placement | String | left | options: left/right | N +readonly | Boolean | undefined | \- | N 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 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 diff --git a/src/radio/README.md b/src/radio/README.md index 640784333..90ede13d7 100644 --- a/src/radio/README.md +++ b/src/radio/README.md @@ -73,8 +73,8 @@ label | String / Slot | - | 主文案。[通用类型定义](https://github.com/ max-content-row | Number | 5 | 内容最大行数限制 | N max-label-row | Number | 3 | 主文案最大行数限制 | N name | String | - | HTML 元素原生属性 | N -placement | String | left | 复选框和内容相对位置。可选项：left/right | N -readonly | Boolean | false | 只读状态 | N +placement | String | - | 复选框和内容相对位置。优先级高于 RadioGroup.placement。Radio 单独存在时，默认值为 left。如果父组件存在 RadioGroup，默认值便由 RadioGroup.placement 决定。可选项：left/right | N +readonly | Boolean | undefined | 只读状态 | N 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 ### Radio Events @@ -107,7 +107,8 @@ icon | String / Array | 'circle' | 自定义选中图标和非选中图标。示 keys | Object | - | 用来定义 value / label 在 `options` 中对应的字段别名。TS 类型：`KeysType`。[通用类型定义](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/common/common.ts) | N name | String | - | HTML 元素原生属性 | N options | Array | - | 单选组件按钮形式。RadioOption 数据类型为 string 或 number 时，表示 label 和 value 值相同。TS 类型：`Array` `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 -placement | String | left | 复选框和内容相对位置。可选项：left/right | N +placement | String | left | 复选框和内容相对位置。优先级低于 Radio.placement。可选项：left/right | N +readonly | Boolean | undefined | 只读状态 | N 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 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 diff --git a/src/radio/props.ts b/src/radio/props.ts index db0b07977..0619c87d6 100644 --- a/src/radio/props.ts +++ b/src/radio/props.ts @@ -64,15 +64,14 @@ const props: TdRadioProps = { type: String, value: '', }, - /** 复选框和内容相对位置 */ + /** 复选框和内容相对位置。优先级高于 RadioGroup.placement。Radio 单独存在时，默认值为 left。如果父组件存在 RadioGroup，默认值便由 RadioGroup.placement 决定 */ placement: { type: String, - value: 'left', }, /** 只读状态 */ readonly: { - type: Boolean, - value: false, + type: null, + value: undefined, }, /** 单选按钮的值 */ value: { diff --git a/src/radio/type.ts b/src/radio/type.ts index b91d4f86c..a465cba46 100644 --- a/src/radio/type.ts +++ b/src/radio/type.ts @@ -99,8 +99,7 @@ export interface TdRadioProps { value?: string; }; /** - * 复选框和内容相对位置 - * @default left + * 复选框和内容相对位置。优先级高于 RadioGroup.placement。Radio 单独存在时，默认值为 left。如果父组件存在 RadioGroup，默认值便由 RadioGroup.placement 决定 */ placement?: { type: StringConstructor; @@ -108,7 +107,6 @@ export interface TdRadioProps { }; /** * 只读状态 - * @default false */ readonly?: { type: BooleanConstructor;