You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
66 lines
1.0 KiB
66 lines
1.0 KiB
3 years ago
|
<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;
|
||
|
|
.menu-item{
|
||
|
|
min-width: 76rpx;
|
||
|
|
height: 62rpx;
|
||
|
|
box-sizing: border-box;
|
||
|
|
padding: 6rpx 20rpx;
|
||
|
|
font-size: 32rpx;
|
||
|
|
background: #F6F7F8;
|
||
|
|
border-radius: 14rpx;
|
||
|
|
color: #222;
|
||
|
|
margin-right: 24rpx;
|
||
|
|
}
|
||
|
|
.menu-item-active{
|
||
|
|
color: #EB5744;
|
||
|
|
background: #FFEAE7;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|