@tanzhenxing/zx-express-tabs/README.md

一个用于快递物流场景的选项卡组件

# zx-express-tabs

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

## 安装

```bash
npm install @tanzhenxing/zx-express-tabs
```

## 基本用法

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

## 带徽章的标签页

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

## 禁用状态

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

## 自定义标签页标题

```vue
<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 变量，可以通过覆盖这些变量来自定义样式：

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