logpm/compoment/CheckBox/CheckBox.vue

<template>
	<view @click.stop="handleClick" :class="{'checkbox':true, 'active':props.modelValue}">
		<!-- <view class="fwb" v-show="props.modelValue">
			L
		</view> -->

		<!-- <view class="">

		</view> -->
	</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
		},
	})

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

	const handleClick = () => {
		const flag = props.modelValue
		console.log('flag :>> ', flag);

		emit('update:modelValue', !flag)
		props.click && props.click()
	}
</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: 5upx;
		position: relative;
		transition: all 0.3s;

		&::after {
			opacity: 0;
			content: '';
			border-bottom: 2px solid;
			border-left: 2px solid;
			position: absolute;
			width: 0;
			height: 0;
			left: 50%;
			transform: translateX(-50%) rotateY(180deg) rotate(-45deg);
			width: 30%;
			height: 70%;
			transition: all 0.3s;
		}
	}

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

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