hengmei-two/components/cate-items/cate-pu.vue

<template>
	<view>
		<scroll-view scroll-x >
			<view class="" :class="isCenter?'disac':'disjb'">
				<view @tap="choosecate(index)" v-if="item.title!='仿真设计'"
					:style="{
						background : newCurrent==index ? activeb:newbmo,
						fontSize:newfmo+'px',
						borderRadius:newRadius+'px',
						minWidth:isMinW ? newMinWidth+'px':'',
						color : newCurrent==index ? activec:newcmo}" 
					class="flexs cateitem" :class="(!isCenter && newcateList.length<=4)?'maright0':''"
					v-for="(item,index) in newcateList" :key="index">{{item.title}}</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		name:"cate-pu",
		props:{
			isCenter:{
				type:Boolean,
				default:true
			},
			activeb:{//选中背景色
				type:String,
				default:'#3875F6'
			},
			activec:{//选中字体颜色
				type:String,
				default:'#FFFFFF'
			},
			newcateList:{//分类列表
				type:Array,
				default:function(){
					return [
						{title:'热门问题'},
						{title:'病种'},
						{title:'案例日记'},
						{title:'效果模拟'},
						{title:'效果模拟'},
					]
				}
			},
			newbmo:{//默认背景色
				type:String,
				default:'#FFFFFF'
			},
			newcmo:{//默认字体颜色
				type:String,
				default:'#333333'
			},
			newfmo:{//默认字体大小
				type:String,
				default:'15'
			},
			newRadius:{//圆角
				type:String,
				default:'10'
			},
			isMinW:{//是否使用最小宽度
				type:Boolean,
				default:false
			},
			newMinWidth:{//最小宽度
				type:String,
				default:'52'//49
			},
			newCurrent:{//默认选中
				type:Number,
				default:0
			}
			
		},
		data() {
			return {
				current:0,
			};
		},
		methods:{
			choosecate(index){//二级分类选择
				// console.log('二级分类：',index);
				this.$emit('choosecateEv',index)
			}
		}
	}
</script>

<style scoped>
.catetwomo{background-color: #FFFFFF;color: #4D4D4D;}
.disac{display: flex;align-items: center;}
.flexs{flex-shrink: 0;}
.cateitem{padding: 16rpx 20rpx;text-align: center;margin-right: 20rpx;}
.maright0{margin-right: 0!important;}
</style>