fecrprd/components/v-tab/v-tab.vue

44 lines
747 B
Vue
Raw Permalink Normal View History

2023-03-02 09:44:12 +08:00
<template>
<view class="v-tab">
2023-03-07 18:03:25 +08:00
<view :class="index===selectIndex?'action':''" v-for="(item,index) in data" :key="index"
@click="selectIndex=index,$emit('select',index)">
2023-03-02 09:44:12 +08:00
{{item.name}}
</view>
</view>
</template>
<script>
export default {
2023-03-07 18:03:25 +08:00
name: "vTab",
2023-03-02 09:44:12 +08:00
data() {
return {
2023-03-07 18:03:25 +08:00
2023-03-02 09:44:12 +08:00
};
},
2023-03-07 18:03:25 +08:00
props: {
data: [Array],
selectIndex:[Number]
},
2023-03-02 09:44:12 +08:00
}
</script>
<style lang="scss">
2023-03-07 18:03:25 +08:00
.v-tab {
2023-03-02 09:44:12 +08:00
height: 80upx;
line-height: 80upx;
color: $uni-text-color;
background: white;
box-shadow: 0 2upx 5upx $uni-bg-color-grey;
display: flex;
justify-content: space-around;
align-items: stretch;
font-size: $uni-font-size-base;
2023-03-07 18:03:25 +08:00
2023-03-02 09:44:12 +08:00
.action {
font-weight: bold;
border-bottom: 4upx solid $uni-color-primary;
}
}
</style>