From d5d45da60841847981eab953a7ce464765b1ebd7 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=BB=8E=E4=BC=9F=E6=9D=B0?= <674416404@qq.com> Date: Fri, 6 Dec 2024 15:01:41 +0800 Subject: [PATCH] docs: sync api --- src/radio/props.ts | 3 +-- src/radio/radio-group-props.ts | 7 ++++++- src/radio/radio.en-US.md | 3 ++- src/radio/radio.md | 5 +++-- src/radio/radio.tsx | 11 +++-------- src/radio/type.ts | 9 ++++++--- 6 files changed, 21 insertions(+), 17 deletions(-) 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 ecaa687ef..32ced7acc 100644 --- a/src/radio/radio.tsx +++ b/src/radio/radio.tsx @@ -1,4 +1,4 @@ -import { inject, computed, defineComponent, Ref, getCurrentInstance } from 'vue'; +import { inject, computed, defineComponent, Ref } from 'vue'; import { CheckIcon, CheckCircleFilledIcon } from 'tdesign-icons-vue-next'; import { useDefault } from '../shared'; import config from '../config'; @@ -18,7 +18,6 @@ export default defineComponent({ const renderTNodeContent = useContent(); const renderTNodeJSX = useTNodeJSX(); const radioClass = usePrefixClass('radio'); - const { vnode } = getCurrentInstance(); const [innerChecked, setInnerChecked] = useDefault(props, context.emit, 'checked', 'change'); @@ -37,12 +36,8 @@ export default defineComponent({ return props.borderless; }); const finalPlacement = computed(() => { - const vProps = vnode.props || {}; - if (Reflect.has(vProps, 'placement')) return props.placement; - - if ('placement' in rootGroupProps) return rootGroupProps.placement; - - return props.placement || 'left'; + if (props.placement == null && 'placement' in rootGroupProps) return rootGroupProps.placement; + return props.placement; }); const finalAllowUncheck = computed(() => Boolean(props.allowUncheck || rootGroupProps?.allowUncheck)); 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; /** * 选中的值 */