修改部分自写公共组件代码

components/my-components/my-radio.vue

@@ -1,10 +1,11 @@
 <template>
-	<view class="my-radio u-font-28 u-flex color-333" @tap.stop="changeVal" >
-		<view class="circle u-flex u-row-center"  :style="computedStyle()" :class="{active:modelValue,square:shape==='square'}">
+	<view class="my-radio u-font-28 u-flex color-333" @tap.stop="changeVal">
+		<view class="circle u-flex u-row-center" :style="computedStyle()"
+			:class="{active:modelValue,square:shape==='square'}">
 			<uni-icons type="checkmarkempty" v-if="modelValue" :size="size-4" color="#fff"></uni-icons>
 		</view>
 		<view class="u-m-l-12">
-			{{text}}
+			<slot>{{text}}</slot>
 		</view>
 	</view>
 </template>
@@ -14,11 +15,11 @@
 	} from 'vue'
 	import color from '@/commons/color.js'
 	const props = defineProps({
-		disabled:{
+		disabled: {
 			type: [Boolean],
 			default: false
 		},
-		borderColor:{
+		borderColor: {
 			type: String,
 			default: '#bbb',
 		},
@@ -29,10 +30,10 @@
 		},
 		// v-modal
 		modelValue: {
-			type: [Number,Boolean],
+			type: [Number, Boolean],
 			default: false,
 		},
-		shape:{
+		shape: {
 			//circle square
 			type: String,
 			default: 'circle',
@@ -52,18 +53,19 @@
 		`
 	}
 	const emits = defineEmits(['update:modelValue', 'change'])
+
 	function changeVal() {
-		if(props.disabled){
+		if (props.disabled) {
 			return
 		}
 		emits('click')
-		let currentVal=props.modelValue
-		let type=typeof currentVal 
-		if(type==='number'){
-			currentVal=currentVal===0?1:0
+		let currentVal = props.modelValue
+		let type = typeof currentVal
+		if (type === 'number') {
+			currentVal = currentVal === 0 ? 1 : 0
 		}
-		if(type==='boolean'){
-			currentVal=!currentVal
+		if (type === 'boolean') {
+			currentVal = !currentVal
 		}
 		emits('update:modelValue', currentVal)
 		emits('change', currentVal)
@@ -75,7 +77,7 @@
 
 		.circle {
 			background: #FFFFFF;
-			
+
 			&.active {
 				background-color: $my-main-color;
 				border-color: $my-main-color;
@@ -84,7 +86,8 @@
 			border: 1px solid #707070;
 			border-radius: 50%;
 			overflow: hidden;
-			&.square{
+
+			&.square {
 				border-radius: 8rpx;
 			}
 		}