logpm/compoment/RadioBox/RadioBox.vue

<template>
	<view @click="handleClick" :class="{'checkbox':true, 'active':props.isCheck}">

	</view>
</template>

<script lang="ts" setup>
	import {
		defineProps,
		defineEmits,
	} from 'vue';

	// const props = defineProps(['modelValue', 'click'])
	const props = defineProps({
		// 输入框的值
		modelValue: {
			default: false,
		},
		// 最大值
		click: {
			type: Function,
			default: null
		},
		isCheck: {
			default: false,
		}
	})

	const emit = defineEmits(['update:modelValue'])

	const handleClick = () => {
		const flag = props.isCheck
		console.log('flag :>> ', flag);
		props.click ? props.click() : emit('update:modelValue', !flag)
	}
</script>

<style lang="scss" scoped>
	.fwb {
		font-weight: bold;
	}

	.checkbox {
		border: 4upx solid #8d97a3;
		width: 40upx;
		height: 40upx;
		box-sizing: border-box;
		color: #8d97a3;
		border-radius: 50%;
		position: relative;
		transition: all 0.3s;

		&::after {
			content: '';
			left: 50%;
			top: 50%;
			background-color: #fff;
			position: absolute;
			transform: translate(-50%, -50%);
			width: 50%;
			height: 50%;
			border-radius: 50%;
			transition: all 0.3s;
		}

		&.active {
			border-color: var(--subjectColor);
			color: var(--subjectColor);

			&::after {
				// opacity: 1;
				background-color: var(--subjectColor);
			}
		}
	}
</style>