OnlineEducation-teacher-front/src/views/resourceCenter/components/MyRadioButton.vue

<template>
	<div class="my-radio-button" :class="{ active: isActive }" @click="handleClick">
		<span style="font-size: 14px">{{ label }}</span>
	</div>
</template>

<script setup>
	import { ref, inject } from 'vue'
	// 注入来自父组件的数据
	const group = inject('MyRadioGroupContext')
	const clickType = ref('noClickType')
	const title = ref('')
	// 判断是否是当前选中项
	// const isActive = computed(() => props.value === group.value)
	const isActive = ref(false)

	const props = defineProps({
		value: {
			required: true
		},
		label: {
			type: String,
			default: ''
		},
		index: {
			type: Number
		}
	})
	// 监听 group.value 的变化
	watch(
		() => group.value.value,
		(newVal, oldVal) => {
			// console.log('group.value changed:', newVal, oldVal)
			isActive.value = newVal === props.value
		}
	)

	const setData = (data) => {
		title.value = data
	}
	const getData = (data) => {
		return title.value
	}
	const setClick = () => {
		clickType.value = 'clickType'
	}
	const setNoClick = () => {
		clickType.value = 'noClickType'
	}

	const handleClick = () => {
		console.log(
			'点击了 子布局',
			' isActive.value ',
			isActive.value,
			' props.value ',
			props.value,
			' group.value ',
			group.value
		)
		if (!isActive.value) {
			console.log(
				'具体数值',
				group.value
			)
			group.changeValue(props.value)
		}
	}

	onMounted(() => {
		// if (props.index == 0) {
		// 	isActive.value = true
		// }
	})
</script>

<style scoped>
	.clickType {
		border-radius: 20px;
		background: rgb(45, 130, 226);
		display: flex;
		align-items: center;
		justify-content: center;
		min-height: 50px;
		min-width: 100px;
	}
	.clickType span {
		color: white;
	}
	.noClickType {
		display: flex;
		align-items: center;
		justify-content: center;
		min-height: 50px;
		min-width: 100px;
	}
	.noClickType span {
		color: black;
	}
	.my-radio-button {
		padding-left: 15px;
		padding-right: 15px;
		display: flex;
		justify-content: center;
		align-items: center;
		height: 30px;
		margin: 1px;
		//border: 1px solid #ffffff00;
		//border-radius: 5px;
		/* border: 1px solid #d9d9d9; */
		/* border-radius: 4px; */
		cursor: pointer;
		transition: all 0.2s ease;
	}
	.my-radio-button.active {
		//background-color: #1890ff;
		color: #1890ff;
		//border-color: #1890ff;
		//border: 1px solid #d9d9d9;
		//border-radius: 30px;
	}
</style>