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.
50 lines
1.2 KiB
50 lines
1.2 KiB
<template name="im-tab">
|
|
<view class="tab-main im-flex im-justify-content-start im-align-items-center bg-gray" :style="{height:height+'rpx',borderRadius:height/2+'rpx'}">
|
|
<view class="tab-item" :class="active==index ? 'active' : ''" v-for="(item,index) in values" @click="changeItem(item,index)" :style="{height:itemHeight+'rpx',borderRadius:itemHeight/2+'rpx',lineHeight:itemHeight-8+'rpx'}" :key="index">
|
|
{{item.name}} <text v-if="item.count>0">{{item.count>99 ? '99+' : item.count}}</text>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
<script>
|
|
export default {
|
|
|
|
name : "im-tab",
|
|
components: {
|
|
},
|
|
props : {
|
|
values:{type:Array, default:function(){return [];}},
|
|
height:{type:Number,default:72}
|
|
},
|
|
data() {
|
|
return {
|
|
active:0,
|
|
itemHeight:48
|
|
}
|
|
},
|
|
created : function(){
|
|
this.itemHeight=this.height-16;
|
|
},
|
|
methods:{
|
|
changeItem(item,index){
|
|
this.active=index;
|
|
this.$emit('change',item,index)
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
<style lang="scss" scoped>
|
|
.tab-main{
|
|
padding:10rpx;
|
|
.tab-item{
|
|
padding: 6rpx 12rpx;
|
|
min-width:150rpx;
|
|
text-align: center;
|
|
vertical-align: middle;
|
|
&.active{
|
|
box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
|
|
background-color: #fff;
|
|
color:#18bc37;
|
|
}
|
|
}
|
|
}
|
|
</style>
|