feat: up-radio组件支持uni-app-x

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],

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']
+        }
+    }
+})

src/uni_modules/uview-plus/components/up-radio-group/radioGroup.js

@@ -27,4 +27,4 @@ export default {
         borderBottom: false,
         iconPlacement: 'left'
     }
-}
+} as UTSJSONObject

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

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 [email protected]
+	 * @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>

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']
+        }
+    }
+})

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