first

components/my-components/my-radio.vue

@@ -0,0 +1,96 @@
+<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">
+			<slot>{{text}}</slot>
+		</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>