<template>
	<view class="sideSelect">
		<view v-for="(item, i) in menus" :key="i" :class="['item', {active: cur === item.id }]" @click="menuChange(item)">{{ item.classificationName }}</view>
	</view>
</template>

<script>
	export default {
		name:"sideSelect",
		props: {
			menus: {
				type: Array,
				default: () => []
			},
		},
		data() {
			return {
				cur: ''
			};
		},
		methods: {
			menuChange(item) {
				this.cur = item.id
				this.$emit('menuClick', item)
			}
		}
	}
</script>

<style scoped lang="scss">
.sideSelect {
	min-width: 200rpx;
	font-size: 28rpx;
	text-align: center;
	background-color: #fff;
	.item {
		padding: 20rpx 0;
	}
	.active {
		color: #fff;
		background-color: $uni-primary;
	}
}
</style>