chanyiUniapp/pages/knowledge/components/secondMenu.vue

<template>
	<view class="second-menu-box acea-row">
		 <view 
		 class="menu-item"
		 :class="[item.id === active ? 'menu-item-active':'']"
		 v-for="(item,index) in menuList" 
		 :key="index" 
		 @click="menuClick(index,item)">{{item.categoryName}}</view>
	</view>
</template>

<script>
	export default{
		props:{
			menuList:{
				type:Array,
				default:[]
			},
			active:{
				type: Number,
				default() {
				    return 0;
				}
			}
		},
		data(){
			return {
				
			}
		},
		created() {
			// console.log(this.menuList)
		},
		mounted() {
			// console.log(this.menuList)
		},
		methods:{
			menuClick(index,item){
				this.$emit('secondMenuClick',item)
			},
		}
	}
</script>

<style scoped lang="less">
.second-menu-box{
	width: 100%;
	margin-bottom: 40rpx;
	padding-top: 34rpx;
	background: #fff;
	padding-bottom: 20rpx;
	.menu-item{
		min-width: 76rpx;
		height: 62rpx;
		line-height: 62rpx;
		box-sizing: border-box;
		padding: 0rpx 20rpx;
		font-size: 28rpx;
		background: #F6F7F8;
		border-radius: 14rpx;
		color: #222;
		margin-right: 24rpx;
	}
	.menu-item-active{
		color: #EB5744;
		background: #FFEAE7;
	}
}
</style>