baozhida-deliver-medicine-app/components/x-checkbox.vue

<template>
	<view class="checkbox-container">
		<view class="checkbox" :class="{'checkbox-checked': isChecked}">
			<!-- 复选框内部可以放一个小图标或者其他装饰 -->
			<text v-if="isChecked" class="checkbox-icon">
				<u-icon name="checkbox-mark" color="#fff"></u-icon>
			</text>
		</view>
		<text class="check_title">{{ label }}</text>
	</view>
</template>

<script>
	export default {
		props: {
			label: String, // 复选框旁边的文本
			isChecked: Boolean, // 复选框旁边的文本
		},
		data() {
			return {};
		},
		methods: {
			toggleCheck() {
				// this.isChecked = !this.isChecked;
				// 触发自定义事件，可以在父组件中监听该事件
				// this.$emit('change', this.isChecked);
			},
		},
	};
</script>

<style scoped>
	.checkbox-container {
		display: flex;
		align-items: center;
	}

	.checkbox {
		width: 35rpx;
		height: 35rpx;
		border: 1rpx solid #ccc;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-right: 10rpx;
		border-radius: 8rpx;
		user-select: none;
		cursor: pointer;
	}

	.check_title {
		margin-left: 5rpx;
		font-size: 32rpx;
		font-weight: 600;
	}

	.checkbox-checked {
		border-color: #2979ff;
		background-color: #2979ff;
	}

	.checkbox-icon {
		color: #fff;
		font-size: 24rpx;
	}
</style>