<template>
<view class="tabs" :style="{'justify-content':layout}">
<view class="tab" :class="{ 'tab-active': index === activeIndex }" v-for="(item, index) in options" :key="index"
@click="handleTabClick(index)">
<view :item="item" :index="index">{{ item.title }}</view>
</view>
</view>
</template>
<script lang="ts" setup>
import type { PropType } from 'vue'
interface Option {
// 标题
title?: string
// 其他配置项
[propName: string]: any
}
const props = defineProps({
// 初始选中项index
activeIndex: {
type: Number,
default: 0
},
// 标签数组
options: {
type: Array as PropType<Option[]>,
require: true,
default() {
return []
}
},
// display布局
layout: {
type: String,
default:"space-between"
}
})
const emit = defineEmits(['changeTab'])
const handleTabClick = (index: number) => {
emit('changeTab', index)
}
</script>
<style lang="scss" scoped>
.tabs {
display: flex;
align-items: center;
.tab {
margin: 12rpx 30rpx;
font-size: 30rpx;
font-weight: bold;
color: var(--color-primary-dark);
white-space: nowrap;
text-align: center;
position: relative;
}
.tab-active::after {
content: '';
position: absolute;
bottom: -12rpx;
left: 50%;
transform: translateX(-50%);
width: 96%;
height: 6rpx;
background: var(--color-primary-dark);
border-radius: 20rpx;
}
}
</style>
子组件
<Tabs :activeIndex="activeIndex" :options="tabs" @changeTab="changeTab" :layout="'space-around'"></Tabs>
//:layout多个标题dispaly 布局方式
<template v-if="activeIndex === 0">
// 内容
</template>
<template v-if="activeIndex === 1">
// 内容
</template>
<script lang="ts" setup>
//下标
const activeIndex = ref(0);
//标题内容
const tabs = ref([
{
title: "待处理",
},
{
title: "已提货",
},
])
//点击标题事件
const changeTab = (index: number) => {
activeIndex.value = index;
}
</script>