98 lines
2.0 KiB
Vue
98 lines
2.0 KiB
Vue
<template>
|
|
<view>
|
|
<scroll-view scroll-x >
|
|
<view class="" :class="isCenter?'disac':'disjb'">
|
|
<view @tap="choosecate(index)"
|
|
: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>
|