first

components/my-components/my-radio.vue

@@ -0,0 +1,93 @@
+<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'}">
+			<uni-icons type="checkmarkempty" v-if="modelValue" :size="size-4" color="#fff"></uni-icons>
+		</view>
+		<view class="u-m-l-12">
+			{{text}}
+		</view>
+	</view>
+</template>
+<script setup>
+	import {
+		ref
+	} from 'vue'
+	import color from '@/commons/color.js'
+	const props = defineProps({
+		disabled:{
+			type: [Boolean],
+			default: false
+		},
+		borderColor:{
+			type: String,
+			default: '#bbb',
+		},
+		size: {
+			//单位px
+			type: Number,
+			default: 16,
+		},
+		// v-modal
+		modelValue: {
+			type: [Number,Boolean],
+			default: false,
+		},
+		shape:{
+			//circle square
+			type: String,
+			default: 'circle',
+		},
+		text: {
+			type: String,
+			default: ''
+		}
+	})
+
+	function computedStyle() {
+		return `
+			width:${props.size}px;
+			height:${props.size}px;
+			border-color:${props.borderColor};
+			border-color:${props.modelValue?color.ColorMain:props.borderColor};
+		`
+	}
+	const emits = defineEmits(['update:modelValue', 'change'])
+	function changeVal() {
+		if(props.disabled){
+			return
+		}
+		emits('click')
+		let currentVal=props.modelValue
+		let type=typeof currentVal 
+		if(type==='number'){
+			currentVal=currentVal===0?1:0
+		}
+		if(type==='boolean'){
+			currentVal=!currentVal
+		}
+		emits('update:modelValue', currentVal)
+		emits('change', currentVal)
+	}
+</script>
+
+<style lang="scss" scoped>
+	.my-radio {
+
+		.circle {
+			background: #FFFFFF;
+			
+			&.active {
+				background-color: $my-main-color;
+				border-color: $my-main-color;
+			}
+
+			border: 1px solid #707070;
+			border-radius: 50%;
+			overflow: hidden;
+			&.square{
+				border-radius: 8rpx;
+			}
+		}
+
+	}
+</style>