diff --git a/src/radio/_example-composition/group.vue b/src/radio/_example-composition/group.vue index e9f4c45f2..1c3aceacd 100644 --- a/src/radio/_example-composition/group.vue +++ b/src/radio/_example-composition/group.vue @@ -3,7 +3,6 @@ - 选项一 @@ -12,6 +11,16 @@ 选项四 + + + @@ -19,6 +28,7 @@ import { ref } from 'vue'; const value = ref(''); +const value1 = ref(''); const value2 = ref(''); const options = ref([ { diff --git a/src/radio/_example/group.vue b/src/radio/_example/group.vue index e887ae992..df06eb5a5 100644 --- a/src/radio/_example/group.vue +++ b/src/radio/_example/group.vue @@ -3,7 +3,6 @@ - 选项一 @@ -12,6 +11,16 @@ 选项四 + + + @@ -20,6 +29,7 @@ export default { data() { return { value: '', + value1: '', value2: '', options: [ { diff --git a/src/radio/group.tsx b/src/radio/group.tsx index d9eb4ad5f..22f93cae6 100644 --- a/src/radio/group.tsx +++ b/src/radio/group.tsx @@ -6,6 +6,7 @@ import { TdRadioGroupProps, RadioOptionObj, RadioOption, RadioValue, } from './type'; import Radio from './radio'; +import RadioButton from './radio-button'; import { TNodeReturnValue } from '../common'; import { emitEvent } from '../utils/event'; import { getClassPrefixMixins } from '../config-provider/config-receiver'; @@ -17,7 +18,9 @@ const classPrefixMixins = getClassPrefixMixins('radio-group'); export default mixins(classPrefixMixins).extend({ name: 'TRadioGroup', - props: { ...props }, + props: { + ...props, + }, components: { Radio, @@ -52,8 +55,11 @@ export default mixins(classPrefixMixins).extend({ if (isNumber(option) || isString(option)) { opt = { value: option, label: option.toString() }; } + + const RadioComponent = this.theme === 'button' ? RadioButton : Radio; + return ( - {typeof opt.label === 'function' ? opt.label(h) : opt.label} - + ); }); } diff --git a/src/radio/radio-group-props.ts b/src/radio/radio-group-props.ts index 33673b33c..f8279d3cb 100644 --- a/src/radio/radio-group-props.ts +++ b/src/radio/radio-group-props.ts @@ -24,6 +24,14 @@ export default { options: { type: Array as PropType, }, + /** 组件风格 */ + theme: { + type: String as PropType, + default: 'radio' as TdRadioGroupProps['theme'], + validator(val: TdRadioGroupProps['theme']): boolean { + return ['radio', 'button'].includes(val); + }, + }, /** 组件尺寸【讨论中】 */ size: { type: String as PropType, diff --git a/src/radio/radio.en-US.md b/src/radio/radio.en-US.md index c175f5fbc..40f58a983 100644 --- a/src/radio/radio.en-US.md +++ b/src/radio/radio.en-US.md @@ -31,6 +31,7 @@ allowUncheck | Boolean | false | \- | N disabled | Boolean | undefined | \- | N name | String | - | \- | N options | Array | - | Typescript：`Array` `type RadioOption = string \| number \| RadioOptionObj` `interface RadioOptionObj { label?: string \| TNode; value?: string \| number; disabled?: boolean }`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts)。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/radio/type.ts) | N +theme | String | radio | options：radio/button。 | N size | String | medium | options：small/medium/large。Typescript：`SizeEnum`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N value | String / Number / Boolean | - | `v-model` is supported。Typescript：`T` | N defaultValue | String / Number / Boolean | - | uncontrolled property。Typescript：`T` | N diff --git a/src/radio/radio.md b/src/radio/radio.md index 882848a30..66e63192f 100644 --- a/src/radio/radio.md +++ b/src/radio/radio.md @@ -31,6 +31,7 @@ allowUncheck | Boolean | false | 是否允许取消选中 | N disabled | Boolean | undefined | 是否禁用全部子单选框 | 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; disabled?: boolean }`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts)。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/radio/type.ts) | N +theme | String | radio | 组件风格,可选项：radio/button。 | N size | String | medium | 组件尺寸【讨论中】。可选项：small/medium/large。TS 类型：`SizeEnum`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N value | String / Number / Boolean | - | 选中的值。支持语法糖 `v-model`。TS 类型：`T` | N defaultValue | String / Number / Boolean | - | 选中的值。非受控属性。TS 类型：`T` | N diff --git a/src/radio/type.ts b/src/radio/type.ts index 4acc9a81d..9783dda87 100644 --- a/src/radio/type.ts +++ b/src/radio/type.ts @@ -90,6 +90,11 @@ export interface TdRadioGroupProps { * @default outline */ variant?: 'outline' | 'primary-filled' | 'default-filled'; + + /** + * 组件风格 + */ + theme?: 'radio' | 'button'; /** * 选中值发生变化时触发 */ diff --git a/test/snap/__snapshots__/csr.test.js.snap b/test/snap/__snapshots__/csr.test.js.snap index 54fd2b42b..a51012700 100644 --- a/test/snap/__snapshots__/csr.test.js.snap +++ b/test/snap/__snapshots__/csr.test.js.snap @@ -84880,6 +84880,111 @@ exports[`csr snapshot test > csr test ./src/radio/_example/group.vue 1`] = ` +
+
+
+
+ + + + +
+
+
+
`; diff --git a/test/snap/__snapshots__/ssr.test.js.snap b/test/snap/__snapshots__/ssr.test.js.snap index 1e5c54a7e..ee6c1ee13 100644 --- a/test/snap/__snapshots__/ssr.test.js.snap +++ b/test/snap/__snapshots__/ssr.test.js.snap @@ -811,7 +811,7 @@ exports[`ssr snapshot test > renders ./src/progress/_example/status.vue correctl exports[`ssr snapshot test > renders ./src/radio/_example/base.vue correctly 1`] = `"
"`; -exports[`ssr snapshot test > renders ./src/radio/_example/group.vue correctly 1`] = `"
"`; +exports[`ssr snapshot test > renders ./src/radio/_example/group.vue correctly 1`] = `"
"`; exports[`ssr snapshot test > renders ./src/radio/_example/size.vue correctly 1`] = `"
"`;