uniapp实现tab标签栏 vue3+ts

<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>