uniProject/pages/newEnglish/components/selectTypes.vue

<template>
	<view class="select-types-box">
		<view class="types-item" :class="{active: activeSelect == 1}" @click="handleClick(0)">学</view>
		<icon class="jt-item" :class="{active: activeSelect == 1}"></icon>
		<view class="types-item" :class="{active: activeSelect == 2}" @click="handleClick(1)">拼</view>
		<icon class="jt-item" :class="{active: activeSelect == 2}"></icon>
		<view class="types-item" :class="{active: activeSelect == 3}" @click="handleClick(2)">读</view>
		<icon class="jt-item" :class="{active: activeSelect == 3}"></icon>
		<view class="types-item" :class="{active: activeSelect == 4}" @click="handleClick(3)">选</view>
		<icon class="jt-item" :class="{active: activeSelect == 4}"></icon>
		<view class="types-item" :class="{active: activeSelect == 5}" @click="handleClick(4)">背</view>
	</view>
</template>

<script setup>
	defineProps({
		activeSelect: {
			type: [String,Number],
			required: true
		}
	})
	
	const emits = defineEmits(['change'])
	
	function handleClick(code) {
		emits('change',code)
	}
</script>

<style lang="scss" scoped>
	.select-types {
		display: flex;
		justify-content: space-between;
	}
	.active {
		color: red;
	}
</style>