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>
</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;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #8d97a3;
		border-radius: 5upx;

		>view {
			transform: rotateY(180deg) rotate(-45deg);
		}
	}

	.active {
		border-color: var(--subjectColor);
		color: var(--subjectColor);
	}
</style>