zx-express-tabs

一个用于快递物流场景的选项卡组件，支持徽章显示、禁用状态和自定义样式。

安装

npm install @tanzhenxing/zx-express-tabs

基本用法

<template>
  <zx-express-tabs v-model="activeTab" @tab-change="handleTabChange">
    <zx-tab-pane name="tab1" label="待发货">
      <view>待发货内容</view>
    </zx-tab-pane>
    <zx-tab-pane name="tab2" label="运输中">
      <view>运输中内容</view>
    </zx-tab-pane>
    <zx-tab-pane name="tab3" label="已送达">
      <view>已送达内容</view>
    </zx-tab-pane>
  </zx-express-tabs>
</template>

<script setup>
import { ref } from 'vue'
import zxExpressTabs from '@tanzhenxing/zx-express-tabs/zx-express-tabs.vue'

const activeTab = ref('tab1')

const handleTabChange = (tabName) => {
  console.log('切换到标签页:', tabName)
}
</script>

带徽章的标签页

<template>
  <zx-express-tabs v-model="activeTab">
    <zx-tab-pane name="tab1" label="待发货" badge="5">
      <view>待发货内容</view>
    </zx-tab-pane>
    <zx-tab-pane name="tab2" label="运输中" badge="new" badge-type="warning" badge-dot>
      <view>运输中内容</view>
    </zx-tab-pane>
    <zx-tab-pane name="tab3" label="已送达">
      <view>已送达内容</view>
    </zx-tab-pane>
  </zx-express-tabs>
</template>

禁用状态

<template>
  <zx-express-tabs v-model="activeTab">
    <zx-tab-pane name="tab1" label="待发货">
      <view>待发货内容</view>
    </zx-tab-pane>
    <zx-tab-pane name="tab2" label="运输中" disabled>
      <view>运输中内容</view>
    </zx-tab-pane>
    <zx-tab-pane name="tab3" label="已送达">
      <view>已送达内容</view>
    </zx-tab-pane>
  </zx-express-tabs>
</template>

自定义标签页标题

<template>
  <zx-express-tabs v-model="activeTab">
    <template #tab-label="{ pane, index }">
      <view class="custom-label">
        <zx-icon name="truck" size="20"></zx-icon>
        <text>{{ pane.label }}</text>
      </view>
    </template>
    
    <zx-tab-pane name="tab1" label="待发货">
      <view>待发货内容</view>
    </zx-tab-pane>
    <zx-tab-pane name="tab2" label="运输中">
      <view>运输中内容</view>
    </zx-tab-pane>
  </zx-express-tabs>
</template>

API

zx-express-tabs Props

| 参数 | 说明 | 类型 | 默认值 | |------|------|------|--------| | v-model | 当前激活的标签页名称 | String/Number | - |

zx-express-tabs Events

| 事件名 | 说明 | 回调参数 | |--------|------|----------| | tab-click | 点击标签页时触发 | (pane, index) | | tab-change | 切换标签页时触发 | (tabName) |

zx-express-tabs Slots

| 插槽名 | 说明 | 参数 | |--------|------|------| | default | 标签页内容 | - | | tab-label | 自定义标签页标题 | { pane, index } |

zx-tab-pane Props

| 参数 | 说明 | 类型 | 默认值 | |------|------|------|--------| | name | 标签页的唯一标识 | String/Number | - | | label | 标签页显示的文字 | String | - | | disabled | 是否禁用该标签页 | Boolean | false | | badge | 徽章内容 | String/Number | - | | badge-type | 徽章类型 | String | 'error' | | badge-dot | 是否显示为小红点 | Boolean | false | | badge-max | 徽章最大数值 | Number | - | | badge-hidden | 是否隐藏徽章 | Boolean | false | | badge-class | 徽章自定义类名 | String | - |

zx-express-tabs Methods

通过 ref 可以获取到组件实例并调用下列方法：

| 方法名 | 说明 | 参数 | |--------|------|------| | switchTab | 切换到指定标签页 | (index) |

样式定制

组件使用了以下 CSS 变量，可以通过覆盖这些变量来自定义样式：

.express-tabs {
  /* 标签页头部背景色 */
  --tab-header-bg: #f5f5f5;
  
  /* 未激活标签页背景色 */
  --tab-item-bg: #e5e5e5;
  
  /* 激活标签页背景色 */
  --tab-item-active-bg: #fff;
  
  /* 标签页文字颜色 */
  --tab-item-color: #333;
  
  /* 禁用标签页文字颜色 */
  --tab-item-disabled-color: #c0c0c0;
  
  /* 禁用标签页背景色 */
  --tab-item-disabled-bg: #f0f0f0;
  
  /* 标签页圆角 */
  --tab-border-radius: 30rpx;
  
  /* 标签页字体大小 */
  --tab-font-size: 32rpx;
  
  /* 内容区域最小高度 */
  --tab-content-min-height: 400rpx;
}

特性

• ✅ 支持 v-model 双向绑定
• ✅ 支持徽章显示（数字、文字、小红点）
• ✅ 支持禁用状态
• ✅ 支持自定义标签页标题
• ✅ 响应式设计，适配不同屏幕尺寸
• ✅ 圆角设计，美观大方
• ✅ 平滑过渡动画
• ✅ TypeScript 支持

依赖

• @tanzhenxing/zx-badge: 徽章组件
• Vue 3.0+

许可证

ISC

作者

tanzhenxing

版本

1.0.2