diff --git a/src/radio/props.ts b/src/radio/props.ts index 36e52e2d6..d335e6977 100644 --- a/src/radio/props.ts +++ b/src/radio/props.ts @@ -70,10 +70,9 @@ export default { type: String, default: '', }, - /** 复选框和内容相对位置 */ + /** 复选框和内容相对位置。优先级高于 RadioGroup.placement。Radio 单独存在时,默认值为 left。如果父组件存在 RadioGroup,默认值便由 RadioGroup.placement 决定 */ placement: { type: String as PropType, - default: 'left' as TdRadioProps['placement'], validator(val: TdRadioProps['placement']): boolean { if (!val) return true; return ['left', 'right'].includes(val); diff --git a/src/radio/radio-group-props.ts b/src/radio/radio-group-props.ts index ffabc1a1f..984761cf9 100644 --- a/src/radio/radio-group-props.ts +++ b/src/radio/radio-group-props.ts @@ -35,7 +35,7 @@ export default { options: { type: Array as PropType, }, - /** 复选框和内容相对位置 */ + /** 复选框和内容相对位置。优先级低于 Radio.placement */ placement: { type: String as PropType, default: 'left' as TdRadioGroupProps['placement'], @@ -44,6 +44,11 @@ export default { return ['left', 'right'].includes(val); }, }, + /** 只读状态 */ + readonly: { + type: Boolean, + default: undefined, + }, /** 选中的值 */ value: { type: [String, Number, Boolean] as PropType, diff --git a/src/radio/radio.en-US.md b/src/radio/radio.en-US.md index 3e5170f7f..88daf390f 100644 --- a/src/radio/radio.en-US.md +++ b/src/radio/radio.en-US.md @@ -20,7 +20,7 @@ label | String / Slot / Function | - | Typescript:`string \| TNode`。[see mor maxContentRow | Number | 5 | \- | N maxLabelRow | Number | 3 | \- | N name | String | - | \- | N -placement | String | left | options: left/right | N +placement | String | - | options: left/right | N readonly | Boolean | undefined | \- | N value | String / Number / Boolean | undefined | Typescript:`T` | N onChange | Function | | Typescript:`(checked: boolean, context: { e: Event }) => void`
| N @@ -44,6 +44,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 \| TNode; value?: string \| number \| boolean; disabled?: boolean }`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts)。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/radio/type.ts) | N placement | String | left | options: left/right | N +readonly | Boolean | undefined | \- | N value | String / Number / Boolean | - | `v-model` and `v-model:value` is supported。Typescript:`T` `type RadioValue = string \| number \| boolean`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/radio/type.ts) | N defaultValue | String / Number / Boolean | - | uncontrolled property。Typescript:`T` `type RadioValue = string \| number \| boolean`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/radio/type.ts) | N onChange | Function | | Typescript:`(value: T, context: { e: Event; name?:string }) => void`
| N diff --git a/src/radio/radio.md b/src/radio/radio.md index 0f45e2c51..715ac2b8d 100644 --- a/src/radio/radio.md +++ b/src/radio/radio.md @@ -20,7 +20,7 @@ label | String / Slot / Function | - | 主文案。TS 类型:`string \| TNode` maxContentRow | Number | 5 | 内容最大行数限制 | N maxLabelRow | Number | 3 | 主文案最大行数限制 | N name | String | - | HTML 元素原生属性 | N -placement | String | left | 复选框和内容相对位置。可选项:left/right | N +placement | String | - | 复选框和内容相对位置。优先级高于 RadioGroup.placement。Radio 单独存在时,默认值为 left。如果父组件存在 RadioGroup,默认值便由 RadioGroup.placement 决定。可选项:left/right | N readonly | Boolean | undefined | 只读状态 | N value | String / Number / Boolean | undefined | 单选按钮的值。TS 类型:`T` | N onChange | Function | | TS 类型:`(checked: boolean, context: { e: Event }) => void`
选中状态变化时触发 | N @@ -43,7 +43,8 @@ icon | String / Array | 'circle' | 自定义选中图标和非选中图标。示 keys | Object | - | 用来定义 value / label 在 `options` 中对应的字段别名。TS 类型:`KeysType`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/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 \| TNode; value?: string \| number \| boolean; disabled?: boolean }`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts)。[详细类型定义](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/radio/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 | - | 选中的值。支持语法糖 `v-model` 或 `v-model:value`。TS 类型:`T` `type RadioValue = string \| number \| boolean`。[详细类型定义](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/radio/type.ts) | N defaultValue | String / Number / Boolean | - | 选中的值。非受控属性。TS 类型:`T` `type RadioValue = string \| number \| boolean`。[详细类型定义](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/radio/type.ts) | N onChange | Function | | TS 类型:`(value: T, context: { e: Event; name?:string }) => void`
选中值发生变化时触发, `context.name` 指 RadioGroup 的 name 属性 | N diff --git a/src/radio/radio.tsx b/src/radio/radio.tsx index a13dbced7..9f239c116 100644 --- a/src/radio/radio.tsx +++ b/src/radio/radio.tsx @@ -42,12 +42,14 @@ export default defineComponent({ const finalAllowUncheck = computed(() => Boolean(props.allowUncheck || rootGroupProps?.allowUncheck)); + const finalReadonly = computed(() => Boolean(props.readonly || rootGroupProps?.readonly)); + // input props attribute const inputProps = computed(() => ({ name: rootGroupProps.name || props.name, checked: radioChecked.value, disabled: isDisabled.value, - readonly: props.readonly, + readonly: finalReadonly.value, value: props.value, })); @@ -92,7 +94,7 @@ export default defineComponent({ }; const radioOrgChange = (e: Event) => { - if (isDisabled.value || props.readonly) { + if (isDisabled.value || finalReadonly.value) { return; } if (rootGroupChange) { diff --git a/src/radio/type.ts b/src/radio/type.ts index f92ba9c52..827fb3ffd 100644 --- a/src/radio/type.ts +++ b/src/radio/type.ts @@ -77,8 +77,7 @@ export interface TdRadioProps { */ name?: string; /** - * 复选框和内容相对位置 - * @default left + * 复选框和内容相对位置。优先级高于 RadioGroup.placement。Radio 单独存在时,默认值为 left。如果父组件存在 RadioGroup,默认值便由 RadioGroup.placement 决定 */ placement?: 'left' | 'right'; /** @@ -129,10 +128,14 @@ export interface TdRadioGroupProps { */ options?: Array; /** - * 复选框和内容相对位置 + * 复选框和内容相对位置。优先级低于 Radio.placement * @default left */ placement?: 'left' | 'right'; + /** + * 只读状态 + */ + readonly?: boolean; /** * 选中的值 */