From e930471243b3adae9a4393499517fcdc23637b9d Mon Sep 17 00:00:00 2001
From: jry <ijry@qq.com>
Date: Sat, 31 Aug 2024 07:12:12 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20up-radio=E7=BB=84=E4=BB=B6=E6=94=AF?=
 =?UTF-8?q?=E6=8C=81uni-app-x?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/up-cell/up-cell.uvue           |   2 +-
 .../components/up-radio-group/props.uts       |  90 +++++
 .../components/up-radio-group/radioGroup.js   |   2 +-
 .../components/up-radio-group/radioGroup.uts  |  30 ++
 .../up-radio-group/up-radio-group.uvue        | 116 ++++++
 .../uview-plus/components/up-radio/props.uts  |  81 +++++
 .../uview-plus/components/up-radio/radio.uts  |  27 ++
 .../components/up-radio/up-radio.uvue         | 341 ++++++++++++++++++
 .../uview-plus/libs/mixin/mixin.uts           |  16 +-
 uni-app-x/pages.json                          |  16 +-
 .../radio/{radio.nvue => radio.uvue}          |  36 +-
 11 files changed, 724 insertions(+), 33 deletions(-)
 create mode 100644 src/uni_modules/uview-plus/components/up-radio-group/props.uts
 create mode 100644 src/uni_modules/uview-plus/components/up-radio-group/radioGroup.uts
 create mode 100644 src/uni_modules/uview-plus/components/up-radio-group/up-radio-group.uvue
 create mode 100644 src/uni_modules/uview-plus/components/up-radio/props.uts
 create mode 100644 src/uni_modules/uview-plus/components/up-radio/radio.uts
 create mode 100644 src/uni_modules/uview-plus/components/up-radio/up-radio.uvue
 rename uni-app-x/pages/componentsA/radio/{radio.nvue => radio.uvue} (89%)

diff --git a/src/uni_modules/uview-plus/components/up-cell/up-cell.uvue b/src/uni_modules/uview-plus/components/up-cell/up-cell.uvue
index 0aa968129..9e673623f 100644
--- a/src/uni_modules/uview-plus/components/up-cell/up-cell.uvue
+++ b/src/uni_modules/uview-plus/components/up-cell/up-cell.uvue
@@ -92,7 +92,7 @@
 		name: 'up-cell',
 		data() {
 			return {
-
+				parentData: {} as UTSJSONObject
 			}
 		},
 		mixins: [mpMixin, mixin, propsCell],
diff --git a/src/uni_modules/uview-plus/components/up-radio-group/props.uts b/src/uni_modules/uview-plus/components/up-radio-group/props.uts
new file mode 100644
index 000000000..e34530344
--- /dev/null
+++ b/src/uni_modules/uview-plus/components/up-radio-group/props.uts
@@ -0,0 +1,90 @@
+import { defineMixin } from '../../libs/vue'
+import defProps from './radioGroup'
+import defPropsRadio from '../up-radio/radio'
+let crtProp = defProps['radioGroup'] as UTSJSONObject
+let crtPropRadio = defPropsRadio['radio'] as UTSJSONObject
+
+export const propsRadioGroup = defineMixin({
+    props: {
+        // 绑定的值
+        modelValue: {
+            type: [String, Number, Boolean],
+            default: crtProp['value']
+        },
+        // 是否禁用全部radio
+        disabled: {
+            type: Boolean,
+            default: crtProp['disabled']
+        },
+        // 形状，circle-圆形，square-方形
+        shape: {
+            type: String,
+            default: crtProp['shape']
+        },
+        // 选中状态下的颜色，如设置此值，将会覆盖parent的activeColor值
+        activeColor: {
+            type: String,
+            default: crtProp['activeColor']
+        },
+        // 未选中的颜色
+        inactiveColor: {
+            type: String,
+            default: crtProp['inactiveColor']
+        },
+        // 标识符
+        name: {
+            type: String,
+            default: crtProp['name']
+        },
+        // 整个组件的尺寸，默认px
+        size: {
+            type: [String, Number],
+            default: crtProp['size']
+        },
+        // 布局方式，row-横向，column-纵向
+        placement: {
+            type: String,
+            default: crtProp['placement']
+        },
+        // label的文本
+        label: {
+            type: [String],
+            default: crtProp['label']
+        },
+        // label的颜色 （默认 '#303133' ）
+        labelColor: {
+            type: [String],
+            default: crtProp['labelColor']
+        },
+        // label的字体大小，px单位
+        labelSize: {
+            type: [String, Number],
+            default: crtProp['labelSize']
+        },
+        // 是否禁止点击文本操作checkbox(默认 false )
+        labelDisabled: {
+            type: Boolean,
+            default: crtProp['labelDisabled']
+        },
+        // 图标颜色
+        iconColor: {
+            type: String,
+            default: crtProp['iconColor']
+        },
+        // 图标的大小，单位px
+        iconSize: {
+            type: [String, Number],
+            default: crtProp['iconSize']
+        },
+        // 竖向配列时，是否显示下划线
+        borderBottom: {
+            type: Boolean,
+            default: crtProp['borderBottom']
+        },
+        // 图标与文字的对齐方式
+        iconPlacement: {
+            type: String,
+            default: crtPropRadio['iconPlacement']
+        }
+    }
+})
diff --git a/src/uni_modules/uview-plus/components/up-radio-group/radioGroup.js b/src/uni_modules/uview-plus/components/up-radio-group/radioGroup.js
index e3f4824bc..e51841a9a 100644
--- a/src/uni_modules/uview-plus/components/up-radio-group/radioGroup.js
+++ b/src/uni_modules/uview-plus/components/up-radio-group/radioGroup.js
@@ -27,4 +27,4 @@ export default {
         borderBottom: false,
         iconPlacement: 'left'
     }
-}
+} as UTSJSONObject
diff --git a/src/uni_modules/uview-plus/components/up-radio-group/radioGroup.uts b/src/uni_modules/uview-plus/components/up-radio-group/radioGroup.uts
new file mode 100644
index 000000000..189df3667
--- /dev/null
+++ b/src/uni_modules/uview-plus/components/up-radio-group/radioGroup.uts
@@ -0,0 +1,30 @@
+/*
+ * @Author       : jry
+ * @Description  :
+ * @version      : 4.0
+ * @Date         : 2024-08-30 23:26:58
+ * @LastAuthor   : jry
+ * @lastTime     : 2024-08-30 23:26:58
+ * @FilePath     : /uview-plus/libs/config/props/radioGroup
+ */
+export default {
+    // radio-group组件
+    radioGroup: {
+        value: '',
+        disabled: false,
+        shape: 'circle',
+        activeColor: '#2979ff',
+        inactiveColor: '#c8c9cc',
+        name: '',
+        size: 18,
+        placement: 'row',
+        label: '',
+        labelColor: '#303133',
+        labelSize: 14,
+        labelDisabled: false,
+        iconColor: '#ffffff',
+        iconSize: 12,
+        borderBottom: false,
+        iconPlacement: 'left'
+    }
+} as UTSJSONObject
diff --git a/src/uni_modules/uview-plus/components/up-radio-group/up-radio-group.uvue b/src/uni_modules/uview-plus/components/up-radio-group/up-radio-group.uvue
new file mode 100644
index 000000000..4b86f9e89
--- /dev/null
+++ b/src/uni_modules/uview-plus/components/up-radio-group/up-radio-group.uvue
@@ -0,0 +1,116 @@
+<template>
+	<view
+	    class="up-radio-group"
+	    :class="bemClass"
+	>
+		<slot></slot>
+	</view>
+</template>
+
+<script>
+	import { propsRadioGroup } from './props';
+	import { mpMixin } from '../../libs/mixin/mpMixin';
+	import { mixin } from '../../libs/mixin/mixin';
+
+	/**
+	 * radioRroup 单选框父组件
+	 * @author jry ijry@qq.com
+	 * @description 单选框用于有一个选择，用户只能选择其中一个的场景。搭配up-radio使用
+	 * @tutorial https://ijry.github.io/uview-plus/components/radio.html
+	 * @property {String | Number | Boolean}	value 			绑定的值
+	 * @property {Boolean}						disabled		是否禁用所有radio（默认 false ）
+	 * @property {String}						shape			外观形状，shape-方形，circle-圆形(默认 circle )
+	 * @property {String}						activeColor		选中时的颜色，应用到所有子Radio组件（默认 '#2979ff' ）
+	 * @property {String}						inactiveColor	未选中的颜色 (默认 '#c8c9cc' )
+	 * @property {String}						name			标识符
+	 * @property {String | Number}				size			组件整体的大小，单位px（默认 18 ）
+	 * @property {String}						placement		布局方式，row-横向，column-纵向 （默认 'row' ）
+	 * @property {String}						label			文本
+	 * @property {String}						labelColor		label的颜色 （默认 '#303133' ）
+	 * @property {String | Number}				labelSize		label的字体大小，px单位 （默认 14 ）
+	 * @property {Boolean}						labelDisabled	是否禁止点击文本操作checkbox(默认 false )
+	 * @property {String}						iconColor		图标颜色 （默认 '#ffffff' ）
+	 * @property {String | Number}				iconSize		图标的大小，单位px （默认 12 ）
+	 * @property {Boolean}						borderBottom	placement为row时，是否显示下边框 （默认 false ）
+	 * @property {String}						iconPlacement	图标与文字的对齐方式 （默认 'left' ）
+     * @property {Object}						customStyle		组件的样式，对象形式
+	 * @event {Function} change 任一个radio状态发生变化时触发
+	 * @example <up-radio-group v-model="value"></up-radio-group>
+	 */
+	export default {
+		name: 'up-radio-group',
+		mixins: [mpMixin, mixin, propsRadioGroup],
+		computed: {
+			// 这里computed的变量，都是子组件up-radio需要用到的，由于头条小程序的兼容性差异，子组件无法实时监听父组件参数的变化
+			// 所以需要手动通知子组件，这里返回一个parentData变量，供watch监听，在其中去通知每一个子组件重新从父组件(up-radio-group)
+			// 拉取父组件新的变化后的参数
+			parentChangeData(): any {
+                return [this.modelValue, this.disabled, this.inactiveColor, this.activeColor, this.size, this.labelDisabled, this.shape,
+					this.iconSize, this.borderBottom, this.placement
+				]
+			},
+			bemClass(): any {
+				// this.bem为一个computed变量，在mixin中
+				return this.bem('radio-group', [this.placement])
+			},
+		},
+		watch: {
+			// 当父组件需要子组件需要共享的参数发生了变化，手动通知子组件
+			parentChangeData() {
+				// if (this.children.length) {
+				// 	this.children.map(child => {
+				// 		// 判断子组件(up-radio)如果有init方法的话，就就执行(执行的结果是子组件重新从父组件拉取了最新的值)
+				// 		if (typeof(child.init) === 'function') {
+				// 			child.init()
+				// 		}
+				// 	})
+				// }
+			},
+		},
+		data() {
+			return {
+				children: [],
+			}
+		},
+		created() {
+		},
+		// #ifdef VUE3
+		emits: ['update:modelValue', 'change'],
+    	// #endif
+		methods: {
+			// 将其他的radio设置为未选中的状态
+			unCheckedOther(childInstance) {
+				this.children.map(child => {
+					// 所有子radio中，被操作组件实例的checked的值无需修改
+					if (childInstance !== child) {
+						child.checked = false
+					}
+				})
+				const {
+					name
+				} = childInstance
+				// 通过emit事件，设置父组件通过v-model双向绑定的值
+                this.$emit("update:modelValue", name);
+				// 发出事件
+				this.$emit('change', name)
+			},
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	@import "../../libs/css/components.scss";
+
+	.up-radio-group {
+		flex: 1;
+
+		&--row {
+			display: flex;
+			flex-flow: row wrap;
+		}
+
+		&--column {
+			@include flex(column);
+		}
+	}
+</style>
diff --git a/src/uni_modules/uview-plus/components/up-radio/props.uts b/src/uni_modules/uview-plus/components/up-radio/props.uts
new file mode 100644
index 000000000..600fee606
--- /dev/null
+++ b/src/uni_modules/uview-plus/components/up-radio/props.uts
@@ -0,0 +1,81 @@
+/*
+ * @Author       : jry
+ * @Description  : uview-plus component's props mixin file
+ * @version      : 4.0
+ * @Date         : 2024-08-30 23:17:21
+ * @LastAuthor   : jry
+ * @lastTime     : 2024-08-30 23:17:20
+ */
+ import { defineMixin } from '../../libs/vue'
+import defProps from './radio'
+let crtProp = defProps['radio'] as UTSJSONObject
+
+export const propsRadio = defineMixin({
+    props: {
+        // radio的名称
+        name: {
+            type: [String, Number, Boolean],
+            default: crtProp['name']
+        },
+        // 形状，square为方形，circle为圆型
+        shape: {
+            type: String,
+            default: crtProp['shape']
+        },
+        // 是否禁用
+        disabled: {
+            type: [String, Boolean],
+            default: crtProp['disabled']
+        },
+        // 是否禁止点击提示语选中单选框
+        labelDisabled: {
+            type: [String, Boolean],
+            default: crtProp['labelDisabled']
+        },
+        // 选中状态下的颜色，如设置此值，将会覆盖parent的activeColor值
+        activeColor: {
+            type: String,
+            default: crtProp['activeColor']
+        },
+        // 未选中的颜色
+        inactiveColor: {
+            type: String,
+            default: crtProp['inactiveColor']
+        },
+        // 图标的大小，单位px
+        iconSize: {
+            type: [String, Number],
+            default: crtProp['iconSize']
+        },
+        // label的字体大小，px单位
+        labelSize: {
+            type: [String, Number],
+            default: crtProp['labelSize']
+        },
+        // label提示文字，因为nvue下，直接slot进来的文字，由于特殊的结构，无法修改样式
+        label: {
+            type: [String, Number],
+            default: crtProp['label']
+        },
+        // 整体的大小
+        size: {
+            type: [String, Number],
+            default: crtProp['size']
+        },
+        // 图标颜色
+        color: {
+            type: String,
+            default: crtProp['color']
+        },
+        // label的颜色
+        labelColor: {
+            type: String,
+            default: crtProp['labelColor']
+        },
+        // 图标颜色
+        iconColor: {
+            type: String,
+            default: crtProp['iconColor']
+        }
+    }
+})
diff --git a/src/uni_modules/uview-plus/components/up-radio/radio.uts b/src/uni_modules/uview-plus/components/up-radio/radio.uts
new file mode 100644
index 000000000..bcbb8b945
--- /dev/null
+++ b/src/uni_modules/uview-plus/components/up-radio/radio.uts
@@ -0,0 +1,27 @@
+/*
+ * @Author       : jry
+ * @Description  :
+ * @version      : 4.0
+ * @Date         : 2021-08-30 23:14:21
+ * @LastAuthor   : jry
+ * @lastTime     : 2024-08-30 23:20:58
+ * @FilePath     : /uview-plus/libs/config/props/radio
+ */
+export default {
+    // radio组件
+    radio: {
+        name: '',
+        shape: '',
+        disabled: '',
+        labelDisabled: '',
+        activeColor: '',
+        inactiveColor: '',
+        iconSize: '',
+        labelSize: '',
+        label: '',
+        labelColor: '',
+        size: '',
+        iconColor: '',
+        placement: ''
+    }
+} as UTSJSONObject
diff --git a/src/uni_modules/uview-plus/components/up-radio/up-radio.uvue b/src/uni_modules/uview-plus/components/up-radio/up-radio.uvue
new file mode 100644
index 000000000..27f42c155
--- /dev/null
+++ b/src/uni_modules/uview-plus/components/up-radio/up-radio.uvue
@@ -0,0 +1,341 @@
+<template>
+	<view
+	    class="up-radio cursor-pointer"
+		@tap.stop="wrapperClickHandler"
+	    :style="[radioStyle]"
+	    :class="[`up-radio-label--${parentData.iconPlacement}`,
+			parentData.borderBottom != '' && parentData.placement === 'column'
+			&& 'up-border-bottom']"
+	>
+		<view
+		    class="up-radio__icon-wrap cursor-pointer"
+		    @tap.stop="iconClickHandler"
+		    :class="iconClasses"
+		    :style="iconWrapStyle"
+		>
+			<slot name="icon">
+				<up-icon
+				    class="up-radio__icon-wrap__icon"
+				    name="checkbox-mark"
+				    :size="elIconSize"
+				    :color="elIconColor"
+				/>
+			</slot>
+		</view>
+		<text
+			class="up-radio__text"
+		    @tap.stop="labelClickHandler"
+		    :style="{
+				color: elDisabled ? elInactiveColor : elLabelColor,
+				fontSize: elLabelSize,
+				lineHeight: elLabelSize
+			}"
+		>{{label}}</text>
+	</view>
+</template>
+
+<script>
+	import { propsRadio } from './props';
+	import { mpMixin } from '../../libs/mixin/mpMixin';
+	import { mixin } from '../../libs/mixin/mixin';
+	import { addUnit, addStyle, os, deepMerge, formValidate, error } from '../../libs/function/index';
+	/**
+	 * radio 单选框
+	 * @author jry ijry@qq.com
+	 * @description 单选框用于有一个选择，用户只能选择其中一个的场景。搭配up-radio-group使用
+	 * @tutorial https://ijry.github.io/uview-plus/components/radio.html
+	 * @property {String | Number}	name			radio的名称
+	 * @property {String}			shape			形状，square为方形，circle为圆型
+	 * @property {Boolean}			disabled		是否禁用
+	 * @property {String | Boolean}	labelDisabled	是否禁止点击提示语选中单选框
+	 * @property {String}			activeColor		选中时的颜色，如设置parent的active-color将失效
+	 * @property {String}			inactiveColor	未选中的颜色
+	 * @property {String | Number}	iconSize		图标大小，单位px
+	 * @property {String | Number}	labelSize		label字体大小，单位px
+	 * @property {String | Number}	label			label提示文字，因为nvue下，直接slot进来的文字，由于特殊的结构，无法修改样式
+	 * @property {String | Number}	size			整体的大小
+	 * @property {String}			iconColor		图标颜色
+	 * @property {String}			labelColor		label的颜色
+	 * @property {Object}			customStyle		组件的样式，对象形式
+	 * 
+	 * @event {Function} change 某个radio状态发生变化时触发(选中状态)
+	 * @example <up-radio :labelDisabled="false">门掩黄昏，无计留春住</up-radio>
+	 */
+	export default {
+		name: "up-radio",
+		mixins: [mpMixin, mixin, propsRadio],
+		data() {
+			return {
+				checked: false,
+				// 当你看到这段代码的时候，
+				// 父组件的默认值，因为头条小程序不支持在computed中使用this.parent.shape的形式
+				// 故只能使用如此方法
+				parentData: {
+					iconSize: 12,
+					labelDisabled: null,
+					disabled: null,
+					shape: null,
+					activeColor: null,
+					inactiveColor: null,
+					size: 18,
+					value: null,
+					modelValue: null,
+					iconColor: null,
+					placement: 'row',
+					borderBottom: false,
+					iconPlacement: 'left'
+				} as UTSJSONObject
+			}
+		},
+		computed: {
+			// 是否禁用，如果父组件up-raios-group禁用的话，将会忽略子组件的配置
+			elDisabled(): boolean {
+				return this.disabled !== '' ? this.disabled : this.parentData.disabled !== null ? this.parentData.disabled : false;
+			},
+			// 是否禁用label点击
+			elLabelDisabled(): boolean {
+				return this.labelDisabled !== '' ? this.labelDisabled : this.parentData.labelDisabled !== null ? this.parentData.labelDisabled :
+					false;
+			},
+			// 组件尺寸，对应size的值，默认值为21px
+			elSize(): string {
+				return this.size ? this.size : (this.parentData.size ? this.parentData.size : 21);
+			},
+			// 组件的勾选图标的尺寸，默认12px
+			elIconSize(): string {
+				return this.iconSize ? this.iconSize : (this.parentData.iconSize ? this.parentData.iconSize : 12);
+			},
+			// 组件选中激活时的颜色
+			elActiveColor(): string {
+				return this.activeColor ? this.activeColor : (this.parentData.activeColor ? this.parentData.activeColor : '#2979ff');
+			},
+			// 组件选未中激活时的颜色
+			elInactiveColor(): string {
+				return this.inactiveColor ? this.inactiveColor : (this.parentData.inactiveColor ? this.parentData.inactiveColor :
+					'#c8c9cc');
+			},
+			// label的颜色
+			elLabelColor(): string {
+				return this.labelColor ? this.labelColor : (this.parentData.labelColor ? this.parentData.labelColor : '#606266')
+			},
+			// 组件的形状
+			elShape(): string {
+				return this.shape ? this.shape : (this.parentData.shape ? this.parentData.shape : 'circle');
+			},
+			// label大小
+			elLabelSize(): string {
+				return addUnit(this.labelSize ? this.labelSize : (this.parentData.labelSize ? this.parentData.labelSize :
+					'15'))
+			},
+			elIconColor(): string {
+				const iconColor = this.iconColor ? this.iconColor : (this.parentData.iconColor ? this.parentData.iconColor :
+					'#ffffff');
+				// 图标的颜色
+				if (this.elDisabled) {
+					// disabled状态下，已勾选的radio图标改为elInactiveColor
+					return this.checked ? this.elInactiveColor : 'transparent'
+				} else {
+					return this.checked ? iconColor : 'transparent'
+				}
+			},
+			iconClasses(): string {
+				let classes = []
+				// 组件的形状
+				classes.push('up-radio__icon-wrap--' + this.elShape)
+				if (this.elDisabled) {
+					classes.push('up-radio__icon-wrap--disabled')
+				}
+				if (this.checked && this.elDisabled) {
+					classes.push('up-radio__icon-wrap--disabled--checked')
+				}
+				classes = classes.join(' ')
+				return classes
+			},
+			iconWrapStyle(): string {
+				// radio的整体样式
+				const style = {}
+				style.backgroundColor = this.checked && !this.elDisabled ? this.elActiveColor : '#ffffff'
+				style.borderColor = this.checked && !this.elDisabled ? this.elActiveColor : this.elInactiveColor
+				style.width = addUnit(this.elSize)
+				style.height = addUnit(this.elSize)
+				// 如果是图标在右边的话，移除它的右边距
+				if (this.parentData.iconPlacement === 'right') {
+					style.marginRight = 0
+				}
+				return style
+			},
+			radioStyle(): any {
+				const style = {}
+				if(this.parentData.borderBottom && this.parentData.placement === 'row') {
+					error('检测到您将borderBottom设置为true，需要同时将up-radio-group的placement设置为column才有效')
+				}
+				// 当父组件设置了显示下边框并且排列形式为纵向时，给内容和边框之间加上一定间隔
+				if(this.parentData.borderBottom && this.parentData.placement === 'column') {
+					// ios像素密度高，需要多一点的距离
+					style.paddingBottom = os() === 'ios' ? '12px' : '8px'
+				}
+				return deepMerge(style, addStyle(this.customStyle))
+			}
+		},
+		mounted() {
+			this.init()
+		},
+		emits: ["change"],
+		methods: {
+			init(): voif {
+				// 支付宝小程序不支持provide/inject，所以使用这个方法获取整个父组件，在created定义，避免循环引用
+				this.updateParentData()
+				if (!this.parent) {
+					error('up-radio必须搭配up-radio-group组件使用')
+				}
+				// 设置初始化时，是否默认选中的状态
+				this.checked = this.name === this.parentData.modelValue
+			},
+			updateParentData(): void {
+				this.getParentData('up-radio-group')
+			},
+			// 点击图标
+			iconClickHandler(e: any): void {
+				this.preventEvent(e)
+				// 如果整体被禁用，不允许被点击
+				if (!this.elDisabled) {
+					this.setRadioCheckedStatus()
+				}
+			},
+			// 横向两端排列时，点击组件即可触发选中事件
+			wrapperClickHandler(e: any): void {
+				this.parentData['iconPlacement'] === 'right' && this.iconClickHandler(e)
+			},
+			// 点击label
+			labelClickHandler(e: any): void {
+				this.preventEvent(e)
+				// 如果按钮整体被禁用或者label被禁用，则不允许点击文字修改状态
+				if (!this.elLabelDisabled && !this.elDisabled) {
+					this.setRadioCheckedStatus()
+				}
+			},
+			emitEvent(): void {
+				// up-radio的checked不为true时(意味着未选中)，才发出事件，避免多次点击触发事件
+				if (!this.checked) {
+					this.$emit('change', this.name)
+					// 尝试调用up-form的验证方法，进行一定延迟，否则微信小程序更新可能会不及时
+					this.$nextTick(() => {
+						formValidate(this, 'change')
+					})
+				}
+			},
+			// 改变组件选中状态
+			// 这里的改变的依据是，更改本组件的checked值为true，同时通过父组件遍历所有up-radio实例
+			// 将本组件外的其他up-radio的checked都设置为false(都被取消选中状态)，因而只剩下一个为选中状态
+			setRadioCheckedStatus(): void {
+				this.emitEvent()
+				// 将本组件标记为选中状态
+				this.checked = true
+				this.parent.unCheckedOther(this)
+			}
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	@import "../../libs/css/components.scss";
+	$up-radio-wrap-margin-right:6px !default;
+	$up-radio-wrap-font-size:20px !default;
+	$up-radio-wrap-border-width:1px !default;
+	$up-radio-wrap-border-color: #c8c9cc !default;
+	$up-radio-line-height:0 !default;
+	$up-radio-circle-border-radius:100% !default;
+	$up-radio-square-border-radius:3px !default;
+	$up-radio-checked-color:#fff !default;
+	$up-radio-checked-background-color:red !default;
+	$up-radio-checked-border-color: #2979ff !default;
+	$up-radio-disabled-background-color:#ebedf0 !default;
+	$up-radio-disabled--checked-color:#c8c9cc !default;
+	$up-radio-label-margin-left: 5px !default;
+	$up-radio-label-margin-right:12px !default;
+	$up-radio-label-color:$up-content-color !default;
+	$up-radio-label-font-size:15px !default;
+	$up-radio-label-disabled-color:#c8c9cc !default;
+	
+	.up-radio {
+		@include flex(row);
+		overflow: hidden;
+		flex-direction: row;
+		align-items: center;
+		margin-bottom: 5px;
+		margin-top: 5px;
+		
+		&-label--left {
+			flex-direction: row
+		}
+
+		&-label--right {
+			flex-direction: row-reverse;
+			justify-content: space-between
+		}
+
+		&__icon-wrap {
+			/* #ifndef APP-NVUE */
+			box-sizing: border-box;
+			// nvue下，border-color过渡有问题
+			transition-property: border-color, background-color, color;
+			transition-duration: 0.2s;
+			/* #endif */
+			color: $up-content-color;
+			@include flex;
+			align-items: center;
+			justify-content: center;
+			color: transparent;
+			text-align: center;
+			margin-right: $up-radio-wrap-margin-right;
+			font-size: $up-radio-wrap-font-size;
+			border-width: $up-radio-wrap-border-width;
+			border-color: $up-radio-wrap-border-color;
+			border-style: solid;
+
+			/* #ifdef MP-TOUTIAO */
+			// 头条小程序兼容性问题，需要设置行高为0，否则图标偏下
+			&__icon {
+				line-height: $up-radio-line-height;
+			}
+
+			/* #endif */
+
+			&--circle {
+				border-radius: $up-radio-circle-border-radius;
+			}
+
+			&--square {
+				border-radius: $up-radio-square-border-radius;
+			}
+
+			&--checked {
+				color: $up-radio-checked-color;
+				background-color: $up-radio-checked-background-color;
+				border-color: $up-radio-checked-border-color;
+			}
+
+			&--disabled {
+				background-color: $up-radio-disabled-background-color !important;
+			}
+
+			&--disabled--checked {
+				color: $up-radio-disabled--checked-color !important;
+			}
+		}
+
+		&__label {
+			/* #ifndef APP-NVUE */
+			word-wrap: break-word;
+			/* #endif */
+			margin-left: $up-radio-label-margin-left;
+			margin-right: $up-radio-label-margin-right;
+			color: $up-radio-label-color;
+			font-size: $up-radio-label-font-size;
+
+			&--disabled {
+				color: $up-radio-label-disabled-color;
+			}
+		}
+	}
+</style>
diff --git a/src/uni_modules/uview-plus/libs/mixin/mixin.uts b/src/uni_modules/uview-plus/libs/mixin/mixin.uts
index 7938405d4..20d893bc8 100644
--- a/src/uni_modules/uview-plus/libs/mixin/mixin.uts
+++ b/src/uni_modules/uview-plus/libs/mixin/mixin.uts
@@ -138,16 +138,22 @@ export const mixin = defineMixin({
             // 之所以需要这么做，是因为所有端中，头条小程序不支持通过this.parent.xxx去监听父组件参数的变化
             // 此处并不会自动更新子组件的数据，而是依赖父组件up-radio-group去监听data的变化，手动调用更新子组件的方法去重新获取
             this.parent = this.getParent(parentName)
-            // console.log('this.parent', this.parent)
-            // todo
-            // if (this.parent.children) {
+            console.log('this.parent', this.parent)
+            // if (this.parent.$data?.['children'] != null) {
             //     // 如果父组件的children不存在本组件的实例，才将本实例添加到父组件的children中
-            //     this.parent.children.indexOf(this) === -1 && this.parent.children.push(this)
+            //     // if (this.parent.$data['children'].indexOf(this) === -1) {
+            //     //     this.parent.$data['children'].push(this)
+            //     // }
             // }
             if (this.parent != null) {
                 // 历遍parentData中的属性，将parent中的同名属性赋值给parentData
                 UTSJSONObject.keys(this.parentData).map((key: string) => {
-                    this.parentData[key] = this.parent?.$props?.[key]
+                    if (this.parent?.$props?.[key] != null) {
+                        this.parentData[key] = this.parent?.$props?.[key]
+                    }
+                    if (this.parent?.$data?.[key] != null) {
+                        this.parentData[key] = this.parent?.$data?.[key]
+                    }
                 })
             }
 			return {}
diff --git a/uni-app-x/pages.json b/uni-app-x/pages.json
index 8e3a7c4bb..9e13221db 100644
--- a/uni-app-x/pages.json
+++ b/uni-app-x/pages.json
@@ -104,14 +104,14 @@
 			// 	"style": {
 			// 		"navigationBarTitleText": "吸顶"
 			// 	}
-			// },
-			// {
-			// 	"path": "radio/radio",
-			// 	"style": {
-			// 		"navigationBarTitleText": "单选框"
-			// 	}
-			// },
-			// {
+			// }
+			,{
+				"path": "radio/radio",
+				"style": {
+					"navigationBarTitleText": "单选框"
+				}
+			}
+			// ,{
 			// 	"path": "checkbox/checkbox",
 			// 	"style": {
 			// 		"navigationBarTitleText": "复选框"
diff --git a/uni-app-x/pages/componentsA/radio/radio.nvue b/uni-app-x/pages/componentsA/radio/radio.uvue
similarity index 89%
rename from uni-app-x/pages/componentsA/radio/radio.nvue
rename to uni-app-x/pages/componentsA/radio/radio.uvue
index 010e43bf8..514859b76 100644
--- a/uni-app-x/pages/componentsA/radio/radio.nvue
+++ b/uni-app-x/pages/componentsA/radio/radio.uvue
@@ -14,8 +14,8 @@
 							:customStyle="{marginBottom: '8px'}"
 							v-for="(item, index) in radiolist1"
 							:key="index"
-							:label="item.name"
-							:name="item.name"
+							:label="item['name']"
+							:name="item['name']"
 							@change="radioChange"
 						>
 						</up-radio>
@@ -38,8 +38,8 @@
 							:customStyle="{marginBottom: '8px'}"
 							v-for="(item, index) in radiolist2"
 							:key="index"
-							:label="item.name"
-							:name="item.name"
+							:label="item['name']"
+							:name="item['name']"
 						>
 						</up-radio>
 					</up-radio-group>
@@ -60,9 +60,9 @@
 							:customStyle="{marginBottom: '8px'}"
 							v-for="(item, index) in radiolist3"
 							:key="index"
-							:label="item.name"
-							:name="item.name"
-							:disabled="!index"
+							:label="item['name']"
+							:name="item['name']"
+							:disabled="index == 0"
 						>
 						</up-radio>
 					</up-radio-group>
@@ -83,8 +83,8 @@
 							:customStyle="{marginBottom:'8px'}"
 							v-for="(item, index) in radiolist4"
 							:key="index"
-							:label="item.name"
-							:name="item.name"
+							:label="item['name']"
+							:name="item['name']"
 						>
 						</up-radio>
 					</up-radio-group>
@@ -105,8 +105,8 @@
 							:customStyle="{marginBottom: '8px'}"
 							v-for="(item, index) in radiolist5"
 							:key="index"
-							:label="item.name"
-							:name="item.name"
+							:label="item['name']"
+							:name="item['name']"
 						>
 						</up-radio>
 					</up-radio-group>
@@ -126,8 +126,8 @@
 							:customStyle="{marginRight: '16px'}"
 							v-for="(item, index) in radiolist6"
 							:key="index"
-							:label="item.name"
-							:name="item.name"
+							:label="item['name']"
+							:name="item['name']"
 						>
 						</up-radio>
 					</up-radio-group>
@@ -149,8 +149,8 @@
 							:customStyle="{marginBottom: '16px'}"
 							v-for="(item, index) in radiolist7"
 							:key="index"
-							:label="item.name"
-							:name="item.name"
+							:label="item['name']"
+							:name="item['name']"
 						>
 						</up-radio>
 					</up-radio-group>
@@ -299,15 +299,15 @@
 			}
 		},
 		watch: {
-			radiovalue1(newValue, oldValue) {
+			radiovalue1(newValue: any, oldValue: any) {
 				console.log('v-model', newValue);
 			}
 		},
 		methods: {
-			groupChange(n) {
+			groupChange(n: any) {
 				console.log('groupChange', n);
 			},
-			radioChange(n) {
+			radioChange(n: any) {
 				console.log('radioChange', n);
 			}
 		}