61 lines
1.0 KiB
Vue
61 lines
1.0 KiB
Vue
<template>
|
|
<view class="top-tabs">
|
|
<view
|
|
v-for="tab in tabs"
|
|
:key="tab.value"
|
|
class="tab"
|
|
:class="{active: tab.value === modelValue}"
|
|
@click="$emit('update:modelValue', tab.value)"
|
|
>
|
|
{{ tab.label }}
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script setup>
|
|
const props = defineProps({
|
|
tabs: {
|
|
type: Array,
|
|
required: true,
|
|
default: () => []
|
|
},
|
|
modelValue: {
|
|
type: [String, Number],
|
|
required: true
|
|
}
|
|
});
|
|
const emit = defineEmits(['update:modelValue']);
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.top-tabs {
|
|
display: flex;
|
|
border-bottom: 1px solid #eee;
|
|
background: #fff;
|
|
}
|
|
.tab {
|
|
flex: 1;
|
|
padding: 24rpx 0 18rpx 0;
|
|
text-align: center;
|
|
font-size: 15px;
|
|
color: #888;
|
|
position: relative;
|
|
transition: color .2s;
|
|
}
|
|
.tab.active {
|
|
color: #2885ff;
|
|
font-weight: 600;
|
|
}
|
|
.tab.active::after {
|
|
content: '';
|
|
display: block;
|
|
position: absolute;
|
|
left: 25%;
|
|
right: 25%;
|
|
height: 4rpx;
|
|
border-radius: 3rpx;
|
|
background: #2885ff;
|
|
bottom: 0;
|
|
}
|
|
</style>
|