vant 选项卡自定义

要在 Vant 中自定义选项卡，可以使用 Vant 提供的 Tab 组件，并根据自己的需求进行样式和功能的定制。

以下是一个简单的例子：

<template>
  <div>
    <van-tabs v-model="active">
      <van-tab v-for="(item, index) in tabs" :title="item.title" :key="index">
        <p>{{ item.content }}</p>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
export default {
  data() {
    return {
      active: 0,
      tabs: [
        {
          title: '标签一',
          content: '这是标签一的内容'
        },
        {
          title: '标签二',
          content: '这是标签二的内容'
        },
        {
          title: '标签三',
          content: '这是标签三的内容'
        }
      ]
    }
  }
}
</script>

<style scoped>
.van-tab__pane {
  background-color: #f2f2f2; /* 自定义选项卡内容区域样式 */
}
</style>

以上代码使用了 Vant 的 Tab 组件，通过 v-model 控制选中的选项卡，通过 v-for 渲染选项卡列表。在样式中，可以通过 .van-tab__pane 类名来自定义选项卡内容区域的样式。

除此之外，Vant 的 Tab 组件还提供了许多其他的 API 和事件，可以根据自己的需求进行使用。